Эффективное использование aria в html5

C.1. Normative References

«CURIE Syntax 1.0«, W3C Candidate Recommendation, M. Birbeck, S. McCarron, ed., 16 January 2009. Available at: http://www.w3.org/TR/2009/CR-curie-20090116/ The latest version is available at: http://www.w3.org/TR/curie
«Key words for use in RFCs to indicate requirement levels«, RFC 2119, S. Bradner, March 1997. Available at: http://www.rfc-editor.org/rfc/rfc2119.txt
«Modularization of XHTML 1.1«, W3C Recommendation, D. Austin et al., eds., 8 October 2008. Available at: http://www.w3.org/TR/2008/REC-xhtml-modularization-20081008 The latest version is available at: http://www.w3.org/TR/xhtml-modularization
«XHTML Vocabulary», XHTML 2 Working Group. Available at: http://www.w3.org/1999/xhtml/vocab
«Namespaces in XML«, W3C Recommendation, T. Bray et al., eds., 14 January 1999. Available at: http://www.w3.org/TR/1999/REC-xml-names-19990114 The latest version is available at: http://www.w3.org/TR/REC-xml-names

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

ARIA in HTML is a [] specification module. Any HTML features, conformance requirements, or terms that this specification module makes reference to, but does not explicitly define, are defined in the .

This is a draft document and its contents are subject to change without notice.

This document was published by the Web Applications Working Group as a Working Draft. This document is intended to become a W3C Recommendation.

GitHub Issues are preferred for discussion of this specification. Alternatively, you can send comments to our mailing list. Please send them to public-html@w3.org (archives).

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains must disclose the information in accordance with .

Жанры РППравить

Здесь перечислены самые популярные жанры РП.

Кроссовер — самый популярный вид РП. В нём просто надо выбрать персонажа из любой франшизы и карту. Также можно использовать своих ОС.

Игры -простой и интересный жанр для РП. Выбираем персонажа из любой игры и карту

Важно, чтоб персонаж выполнял ту же роль, что и в игре и имел такие же умения. Также в этот жанр иногда добавляют своих ОС

Вообщем отличное РП для реальных геймеров.

Кино — ещё один интересный жанр. Он пожалуй является самым разносторонним потому, что фильмов/мультиков/сериалов на свете существует очень много. Просто берём персонажей и местность из фильма и играем

Тут тоже важно играть своим персонажем честно.

Комиксы — тоже интересный жанр для РП. Теоретически тут можно взять своего супергероя, но нельзя, чтоб он был сильно читерным. Из-за этого часто возникают конфликты, поэтому рекомендуется всё-таки брать существующих персонажей. Правила такие же как и во всех жанрах.

Хоррор — довольно интересный жанр. Обычно ведущий берёт на себя роль монстра или маньяка, остальные игроки стараются выжить по мере их сил, персонажи могут брать полезные предметы к примеру нож или отмычки в качестве стартового предмета. Также они могут иметь уникальные характеристики, к примеру один может быть физически сильным и т.д.

Role Attribute Genericized Proposal

Synchronization With the XHTML Role Vocabulary

ARIA 1.0 Pre-Defined Roles

Possible non-text media relevant role keywords

  • Image/*
    • decorative
    • layout or spacer
    • icon
    • logo
    • photo
    • illustrative (indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text)
    • albumphoto (a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents)
    • portrait
    • satelliteimage
    • visualization (mathematic visualization like fractals, topological, etc)
    • chart (including graphs such as: bar chart, line graph, pie chart, organizational chart, bar chart)
    • diagram
    • drawing
    • geomap (a map of geography as opposed to a site map or other diagram)
    • text (styled text: the equivalent semantic markup should be presented OBJECT element contents, though obviously not when using the plaintext only alt attribute)
    • mathexpr (similar to richtext since few UAs support math XML vocabularies)
    • musicscore (similar to richtext since few UAs support music XML vocabularies)
    • livecam (for stills generated from a live webcam)
  • Audio/*
    • musicaccomp
    • spokenequivalent
  • Other mime types
    • interactive (for interactive multipmedia, e.g., an applet or flash based game)
    • camera (like photo for video to distinguish camera originated video from digitally generated video)
    • livecam (also for video stream as opposed to stills)

Each role keyword might correspond to different specific advice for alt text for a resource, allowing authors a simplified two-step process to providing text equivalents For example, some role keywords might require no alt text or text equivalent whatsoever. While on the other hand, something like role=’portrait’ might specify a list of the names of the individuals in the portrait from left to right (for ltr text): e.g., alt=’Mona Lisa»).

Relation to alt text replacement

The following table shows the relation of the alt text to the role keyword. Authors must include at least one of the following keywords on the element for each embedded resource. In some cases a null value for the alt text can be automatically inferred by UAs from the author designated role and conformance checkers can alert authors when the role and alt attributes are inconsistently specified. Conformance checkers can also provide focussed guidance to authors based on the role attribute keywords. The role attribute must always be specified, while the alt attribute might sometimes be null (note the various required, recommended and optional categories for alt text are only suggested as one possible approach the role attribute makes possible; these could all be required for strictness).

keyword description alt text requirement
decorative null
layout or spacer single space (U+0020)
icon non-null text signifying what the icon represents
logo non-null text signifying what the logo represents
illustrative indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text null
photo description
albumphoto a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents description
portrait names of persons portrayed
chart including graphs such as bar chart, line graph, pie chart, organizational chart, bar chart WCAG alt text replacement
diagram WCAG alt text replacement
geomap a map of geography as opposed to a site map or other diagram WCAG alt text replacement
text styled text WCAG alt text replacement
mathexpr similar to richtext since few UAs support math XML vocabularies WCAG alt text replacment
musicscore similar to richtext since few UAs support music XML vocabularies WCAG alt text replacement
livecam for stills generated from a live webcam subject of livecam
musicaccomp a musical accompaniment to a document description
spokenequivalent audio provided as a spoken equivalent for the document or a portion of the document null
interactive for interactive multipmedia, e.g., an applet or flash based game WCAG alt text replacement
camera like photo for video to distinguish camera originated video from digitally generated video WCAG alt text replacement
livecam also for video stream as opposed to stills subject of livecam

Creating an external style sheet

An HTML page does not have to be limited to just one style sheet, and many large websites will break-up their styles into separate pages, making them easier to organize and maintain. You can even use style sheets for specific functions such as printing a page or for displaying a site on mobile devices. Specific style sheets can even be used to make sites compatible with older web browsers when they are used to visit sites you create.

In this exercise, you will create a new external style sheet, move the style rules from your current document to the external style sheet, and then attach the style sheet to a new HTML page.

1 Choose File > New Text Document.

The text editor you are using may have a different menu command. You may need to choose the equivalent command. For example, many editors will allow you to choose File > New CSS document.

2 Choose File > Save. Name the document styles.css and save the file into the HTML5_02lessons folder. An external cascading style sheet has a specific .css file extension, but it is simply a text file.

3 Switch to the HTML document from the last exercise, but keep the style sheet open as well.

4 In the HTML document, locate the rules you created within the <style> tags, and then select them. Do not select the style tags themselves, just the rules that start with h1 and end with the closing bracket }.

Select just the style rules, not the <style> tag.

5 Choose Edit > Cut, then switch to the styles.css file and choose Edit > Paste to paste the rules into the external style sheet document. Choose File > Save to save your style sheet.

The entire external style sheet acts as a substitute for the <style> tags in the HTML document. Now that you have moved the rules to this document, you need to link it to your HTML page so that a web browser knows where to find the style rules that apply to the HTML.

6 Switch back to the index.html page and choose File > Save. You will add the <link> tag, pointing to the styles.css document. If you do not link to the external styles, the HTML page will have no styles.

7 Place your cursor after the closing style tag </ style> then press return to start a new line. Now type the following:

<link rel=»stylesheet» type=»text/css» href=»styles.css» />

You have added the rel, type, and href attributes. You may recall the href attribute from when you added the hyperlink in an earlier exercise. In order for your external style sheet to work properly, the name of the file, and the path to the file must both be accurate.

8 Choose File > Save and then preview the HTML page in your browser. The page should not change, as the same style is being used; it is simply being applied from outside the document.

9 Close the browser and return to your text editor. You’ll now create a new HTML document, and add the same link to the external CSS file, seeing how the rules are applied.

10 Choose File > Open and locate the file test.html in the HTML5_02lessons folder. This is an empty HTML document.

11 Continuing to work in your text editor, switch back to the index.html file and select the entire <link> element you typed in step 7:

<link rel=»stylesheet» type=»text/css» href=»styles.css» />

and then choose Edit > Copy.

12 Switch back to the test.html document, and then click below the <title> element and Choose Edit > Paste to place the <link> element, then save the the file by choosing File > Save.

Attaching an external style sheet using the <link> element.

The external style sheet is now attached to this HTML document. Any HTML tags you add to this new document will be styled if there is a corresponding rule in the CSS file. For example, the <h1> tag has a style of the color purple.

13 Click inside the <body> element and type:

<h1>The Benefits of Smoothies </h1>

Save the file and preview it in your web browser.

The <h1> tag gets its style from the external CSS style sheet you created.

The heading is purple because the style rule for the <h1> element is color:purple and because this rule is located in an external sheet and linked in two places: the index.html and test.html pages. Because of this, you can control the style of both HTML documents from a central location.

Styling a heading

To get a sense of how CSS works, you’ll create a simple CSS rule that changes the style of a heading in your page. In your index.html page, you already have the content “SmoothieWorld” nested inside an <h1> tag. Perhaps one of the best ways to begin thinking about how CSS works is to consider how the default style of this heading is rendered in the browser.

1 Examine the heading of the file you previewed in the last step of the previous exercise. The style and formatting instructions are being provided by the browser. The size, color, and font are provided by the browser because exact formatting instructions are not specified. The browser only knows that this is a headline. You will redefine this style with a CSS rule.

2 In your code, locate the <title> tag on line 5, click once at the end of the line following the closing tag, then press return to add a new line of code. Type the following:

<style type=»text/css»>

3 Press Return three times and then type </style>. This is a style element which you will use to place your rule for the style of the <h1> element.

The <style> element is nested within the head section of the page, and is where the CSS rules will be placed.

The <style> element is nested within the <head> tags of your page. In HTML, everything nested inside the <head> section is not rendered by the browser on the page. For example, there is also a <title> element inside this section; this title appears at the top of the web browser, not on the actual page.

4 In the empty line below the opening <style> tag, type the following:

h1 {

This is your selector. The selector is the HTML element you want to style, in this case, the Heading 1 element.

5 Press Return and then press Tab to place your cursor below the curly bracket. The tab is optional, but it helps make your CSS more readable. As you will soon see, the number of lines in this rule will grow and it’s worthwhile keeping the code easy to read.

6 Type the following code below the h1 {:


The word color is referred to as a property in CSS syntax and the word purple is a value. The combined pair of a property and a value is called a declaration.

The combination of the property (color) and the value (purple) is often referred to as style rule.

7 Press Return again and on the next line, type } which is the right curly bracket character.

This closes the curly bracket you added in step 4.

You now have three lines in this rule:

h1 {



8 Choose File > Save, and then preview your page in the browser. The head is now a light purple color and you have successfully created your first CSS rule. Close your browser and return to your text editor.

Your H1 color is now being styled by a CSS rule.

9 In the HTML file, select the word purple and type the following for the color value: #800080. This hexadecimal color is the equivalent of purple. You can use either named colors or hexadecimal colors when defining colors using CSS.

Save your file and then preview it in the browser. The color remains the same. Hexadecimal colors are a more common method for describing colors.

Three ways to use styles

In this exercise, your styles were located within the head section of the page. This type of style is called an internal style sheet. In addition to internal (or embedded) style sheets, there are external style sheets and inline styles.

An external style sheet is a separate document with the file extension .css. When using an external style sheet, all styles reside inside the style sheet document and you link it to your HTML pages. While internal style sheets affect only the page on which they exist, external styles can be applied to multiple pages.

Inline styles are used infrequently. With inline styles, the style rules are nested inside the HTML tags. An example of an inline style that colors a heading purple would look like this:

<h1 style=»color:purple»>Smoothies</h1>

You will not be using inline styles very often in this book, which is a reflection of the current state of web design. Working with a combination of internal and external styles is the most common practice of web designers today.


Доступное имя элемента — это его метка или идентификатор. Программы чтения с экрана объявляют имя элемента, когда пользователь переходит к этому элементу. Пользователи программ распознавания речи могут также использовать имя элемента для нацеливания на этот элемент в голосовой команде. Имена изображений происходят из их alt текста , а поля формы получают свои имена из связанных с ними <label> элементов . Большинство элементов получают свои имена из своего текстового содержимого.

Иногда доступное имя по умолчанию недостаточно. В некоторых случаях, оправданна ручная установка доступного имени. Например когда:

  • Короткие повторяющиеся ссылки типа «Read more», контекст которых понятен зрячим пользователям, но которые нуждаются в большем количестве контекста, чтобы отличать их для вспомогательных программ.
  • Кнопки значков, которые не имеют значимого текстового содержимого
  • Области страницы, которые должны быть помечены так, чтобы вспомогательные технологии могли создавать просматриваемый контур страницы

ARIA предлагает два атрибута для изменения имени элемента: aria-label и aria-labelledby.

Когда вы указываете aria-label для элемента, вы переопределяете любое имя, которое имело этот элемент, и заменяете его содержимым этого атрибута aria-label. Возьмите кнопку со значком увеличительного стекла. Мы могли бы использовать aria-label, чтобы программы чтения с экрана перезаписывали содержимое кнопки и объявляли ее как «Search»:

<button aria-label="Search">
    <svg viewBox="0 0 22 22">
        <!-- Some magnifying glass SVG icon -->

Давайте добавим aria-label к нашему переключателю:

<div id="container">
        aria-label="Use dark mode"
        <span class="toggle-knob"></span>
        Dark mode is <span class="status">off</span>

Если вы перейдете к переключателю с помощью программы чтения с экрана, вы услышите что-то вроде этого:

VoiceOver прочитает переключатель как «Use dark mode, off, switch«

aria-label лучше всего использовать, когда на странице еще нет видимой текстовой метки. В качестве альтернативы, если у нас уже есть ярлык на странице, мы могли бы использовать aria-labelledby. aria-labelledby берет идентификатор текстовой метки и использует содержимое этой метки в качестве доступного имени.

Например, мы могли бы использовать aria-labelledby, чтобы использовать заголовок в качестве метки для раздела оглавления. <section> использует идентификатор id, чтобы указать, какой элемент должен служить его меткой. В результате весь раздел оглавления называется Table of Contents (Оглавление).

<section aria-labelledby="toc-heading">
    <h1 id="toc-heading">
        Table of Contents
        <!-- List items here -->

Этот подход очень похож на использование элемента для атрибута, за исключением того, что он работает для всех элементов, а не только для полей формы.

Вот как будет выглядеть наш пример переключателя, если мы используем aria-labelledby вместо aria-label:

<div id="container">
    <div id="toggle-label">Use Dark Mode</div>
        <span class="toggle-knob"></span>
        Dark mode is <span class="status">off</span>

Примечание: во время написания этой статьи я узнал, что программы чтения с экрана могут игнорировать aria-label и aria-labelledby для статических элементов. Если ваши ярлыки не работают, убедитесь, что у вашего элемента есть landmark role или роль, которая подразумевает интерактивность.


User Role Editor WordPress plugin allows you to change user roles and capabilities easy. Just turn on check boxes of capabilities you wish to add to the selected role and click “Update” button to save your changes. That’s done. Add new roles and customize its capabilities according to your needs, from scratch of as a copy of other existing role. Unnecessary self-made role can be deleted if there are no users whom such role is assigned. Role assigned every new created user by default may be changed too. Capabilities could be assigned on per user basis. Multiple roles could be assigned to user simultaneously. You can add new capabilities and remove unnecessary capabilities which could be left from uninstalled plugins. Multi-site support is provided.

To read more about ‘User Role Editor’ visit this page at shinephp.com

Do you need more functionality with quality support in a real time? Do you wish to remove advertisements from User Role Editor pages?Buy Pro version.User Role Editor Pro includes extra modules:

  • Block selected admin menu items for role.
  • Hide selected front-end menu items for no logged-in visitors, logged-in users, roles.
  • Block selected widgets under “Appearance” menu for role.
  • Show widgets at front-end for selected roles.
  • Block selected meta boxes (dashboard, posts, pages, custom post types) for role.
  • “Export/Import” module. You can export user role to the local file and import it to any WordPress site or other sites of the multi-site WordPress network.
  • Roles and Users permissions management via Network Admin for multisite configuration. One click Synchronization to the whole network.
  • “Other roles access” module allows to define which other roles user with current role may see at WordPress: dropdown menus, e.g assign role to user editing user profile, etc.
  • Manage user access to editing posts/pages/custom post type using posts/pages, authors, taxonomies ID list.
  • Per plugin users access management for plugins activate/deactivate operations.
  • Per form users access management for Gravity Forms plugin.
  • Shortcode to show enclosed content to the users with selected roles only.
  • Posts and pages view restrictions for selected roles.
  • Admin back-end pages permissions viewer

Pro version is advertisement free. Premium support is included.


WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) является спецификацией, которая помогает сделать веб-страницы и приложения более доступными для людей с ограниченными возможностями. В частности, WAI-ARIA помогает определить роли (что блоки содержимого делают), состояния (как блоки содержимого настроены), а также дополнительные свойства для поддержки вспомогательных технологий.


Установка ролей WAI-ARIA осуществляется с помощью атрибута role. Эти роли затем указывают, что определённые элементы и блоки содержимого делают на странице.

Роли WAI-ARIA делятся на четыре различные категории: абстрактные, виджеты, структура документа и ориентиры. В этом уроке мы сосредоточимся в основном на структуре документа и ориентирах. Роль структуры документа определяет организационную структуру содержимого на странице, в то время как ориентиры определяют регионы страницы. Конкретные значения ролей для каждой из этих категорий показаны ниже.

Роли структуры документа

  • article
  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • note
  • presentation
  • region
  • row
  • rowheader
  • separator
  • toolbar


  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

HTML5 представил несколько новых структурных элементов, которые обычно соответствуют ролям структуры документа и ориентирам. Как именно эти роли совпадают в отношении конкретных элементов можно увидеть ниже

Пожалуйста, обратите внимание, элементы и не подразумевают роль и допустимые роли для этих элементов могут быть использованы на странице только один раз. Тем не менее, если у вас есть несколько элементов и на странице, должны быть применены роли banner и contentinfo к элементам, непосредственно связанных с документом с точки зрения верхнего уровня, а не к элементам, вложенных в других областях структуры документа

Элемент Предполагаемая роль Допустимые роли
<article> article application, article, document или main
<aside> complementary complementary, note или search
<footer> contentinfo (один раз на страницу)
<header> banner (один раз на страницу)
<nav> navigation navigation
<section> region alert, alertdialog, application,contentinfo, dialog, document, log, main,marquee, region, search или status

Комбинация элементов с их согласованными ролями в HTML5 будет выглядеть как в следующем фрагменте кода.

Состояния и свойства

В сочетании с ролями WAI-ARIA существуют также состояния и свойства, которые помогают информировать вспомогательные технологии, как настроено содержимое. Подобно ролям, состояния и свойства разбиты на четыре категории, в том числе атрибуты виджета, атрибуты живого региона, атрибуты drag-and-drop и атрибуты отношений.

Атрибуты виджета поддерживают роли виджетов и являются специфическими для пользовательского интерфейса и там, где от пользователя требуются действия. Атрибуты живого региона могут быть применены к любому элементу и используются для обозначения изменений содержимого для вспомогательных технологий, к примеру, на странице предупреждений и уведомлений. Атрибуты drag-and-drop информируют об элементах drag-and-drop и обеспечивают альтернативное поведение для вспомогательных технологий. И, наконец, атрибуты отношений описывают отношения между элементами, когда структура документа не может быть определена.

С этим читают