Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Guideline for labeling and describing #994

Merged
merged 137 commits into from Jun 28, 2019
Merged
Changes from 1 commit
Commits
Show all changes
137 commits
Select commit Hold shift + click to select a range
de49b61
Guideline for labeling and describing
zcorpan Feb 28, 2019
713aa1f
Write about roles that don't get name from content
zcorpan Mar 4, 2019
ae9a5ed
Say accessible name instead of label; flesh out accessible name calcu…
zcorpan Mar 7, 2019
ce15b81
Rewrite and expand on labels
zcorpan Mar 12, 2019
f0ddc15
First draft for descriptions
zcorpan Mar 12, 2019
3e08581
Flesh out remaining text
zcorpan Mar 13, 2019
801539f
Try to address Matt's comments
zcorpan Apr 25, 2019
61f20ae
Guideline for labeling and describing
zcorpan Feb 28, 2019
8792871
Write about roles that don't get name from content
zcorpan Mar 4, 2019
c3ec1e9
Say accessible name instead of label; flesh out accessible name calcu…
zcorpan Mar 7, 2019
6b45492
Rewrite and expand on labels
zcorpan Mar 12, 2019
5727205
First draft for descriptions
zcorpan Mar 12, 2019
07cd850
Flesh out remaining text
zcorpan Mar 13, 2019
78e912c
Try to address Matt's comments
zcorpan Apr 25, 2019
a8651d1
Move draft into aria-practices.html
zcorpan Apr 29, 2019
7773aae
Fix typo
zcorpan Apr 29, 2019
54e551b
partially revised intro in markdown; will continue in aria-practices.…
mcking65 Apr 30, 2019
1bf0f40
Incomplete and rough draft of revised outline
mcking65 May 6, 2019
16008f5
more rough draft work on intro content and overall structure
mcking65 May 7, 2019
0f0524f
edits to cardinal rules
mcking65 May 9, 2019
e131ba5
Adjust IA
mcking65 May 11, 2019
a40f81b
Editorial revisions to name from content
mcking65 May 12, 2019
93c9ec7
Editorial revisions to aria-label section
mcking65 May 12, 2019
9276759
Editorial revision to aria-labelledby section
mcking65 May 12, 2019
0f48fdb
complete outline for naming techniques
mcking65 May 13, 2019
c686c11
Partial revision of name calculation section
mcking65 May 13, 2019
6574f8a
Merge branch 'master' into zcorpan/labelling-describing
mcking65 May 13, 2019
746b200
fix/change with feedback
a11ydoer May 17, 2019
490eaed
lint testing and one typo fix
a11ydoer May 17, 2019
0536ec8
fix typo
a11ydoer May 17, 2019
b4a87d8
Remove outdated markdown file
zcorpan May 20, 2019
b596c68
Skeleton table for all concrete roles
zcorpan May 20, 2019
edf4be5
Fill out name from content in the table
zcorpan May 20, 2019
7eb5d5d
Fill in parts of the table
zcorpan May 20, 2019
bdb67d6
Fix capitalization and structure of intro list
mcking65 May 28, 2019
fb4f995
Editorial revisions to clarity in naming rule 5
mcking65 May 28, 2019
82a8e82
fix typo in aria-labelledby guidance section
mcking65 May 28, 2019
702837a
remove explicit URIs from name and role guidance table
mcking65 May 28, 2019
6c64491
Provide intro to guidance by role table
mcking65 May 28, 2019
0612ba8
Add class role-reference to role links in guidance by role table
mcking65 May 28, 2019
1fd6368
Revise name guidance by role table
mcking65 Jun 1, 2019
b2e2067
Fix name on name guidance by role table
mcking65 Jun 1, 2019
c229c76
More name guidance by role
mcking65 Jun 1, 2019
8e8ec74
Update to-do description for label encapsulation
mcking65 Jun 3, 2019
6451e91
Update to-do description for labeling with legend
mcking65 Jun 3, 2019
ab90611
Introduce naming guidance by role table
mcking65 Jun 3, 2019
e2138b9
The label element
zcorpan Jun 4, 2019
66f945b
Merge branch 'master' into zcorpan/labelling-describing
mcking65 Jun 4, 2019
aa068f6
Draft effective naming guidance section
mcking65 Jun 4, 2019
5046495
Revise intro to naming guidance by role table
mcking65 Jun 4, 2019
b977ba5
More updates to naming guidance by role
mcking65 Jun 4, 2019
cccb053
Revise aria-labelledby guidance
mcking65 Jun 4, 2019
87179dc
Fieldset and legend
zcorpan Jun 5, 2019
1743094
Fix everything raised in review by @carmacleod on June 4
mcking65 Jun 9, 2019
3a005b1
Merge branch 'master' into zcorpan/labelling-describing
mcking65 Jun 10, 2019
7fb3244
More minor revisions and to-do updates
mcking65 Jun 10, 2019
32c5ca0
Add stub section for fallback descriptions
mcking65 Jun 10, 2019
7806b3e
Editorial revisions to labeling form elements section
mcking65 Jun 10, 2019
b530fea
Editorial revisions to labeling with legends section.
mcking65 Jun 10, 2019
16964ba
First draft of table and figure captions
zcorpan Jun 10, 2019
9fd5cb4
Add placeholder for section about describing with captions.
mcking65 Jun 10, 2019
892ccff
Revised based on June 10 review comments from @carmacleod.
mcking65 Jun 11, 2019
9f8aab4
Fallback names
zcorpan Jun 11, 2019
9604f46
Mention that caption/figcaption satisfy rule 2 and 3
zcorpan Jun 11, 2019
5717568
Add examples for aria-labelledby referencing a hidden element, and ad…
zcorpan Jun 11, 2019
06cc073
Replace img with input in Examples of non-recursive accessible name c…
zcorpan Jun 12, 2019
03efdcc
Expand on the accessible name calculation
zcorpan Jun 12, 2019
ae90ce1
Discourage the use of fallback naming techniques
zcorpan Jun 13, 2019
2cfd46e
Address some feedback
zcorpan Jun 13, 2019
df4bab3
Use a button instead of an alert in an example for aria-labelledby
zcorpan Jun 18, 2019
ac301c6
Write the accessible description algorithm
zcorpan Jun 18, 2019
a1bd62f
Describing Tables and Figures with Captions
zcorpan Jun 18, 2019
1e56e16
Descriptions Derived from Titles
zcorpan Jun 18, 2019
26a4b1c
Move to-dos that depend on resolution of other issues into github issues
zcorpan Jun 18, 2019
5602d9f
Merge branch 'master' into zcorpan/labelling-describing
mcking65 Jun 20, 2019
7e9e68c
Remove the Content Can Name table column
zcorpan Jun 20, 2019
66a46fc
More editorial revisions to naming guidance table
mcking65 Jun 24, 2019
1097ac6
Combobox role can be used on HTML select and input
zcorpan Jun 24, 2019
47f75ca
Avoid all-caps
zcorpan Jun 24, 2019
063a631
Recommendations for definition and term roles
zcorpan Jun 24, 2019
261a261
Recommendation for document role
zcorpan Jun 24, 2019
3e406d2
Recommendations for feed, form, navigation
zcorpan Jun 24, 2019
b87ad08
Fix markup errors
zcorpan Jun 24, 2019
3d1f8d3
Fix markup typo
zcorpan Jun 24, 2019
cd01400
Recommendation for figure
zcorpan Jun 24, 2019
73df64e
Fix a ReSpec link error
zcorpan Jun 24, 2019
dab3706
Recommendation for none/presentation
zcorpan Jun 24, 2019
6bf004f
Recommendation for rowheader
zcorpan Jun 24, 2019
014d0d8
Recommendation for menuitemcheckbox, menuitemradio, radio, switch
zcorpan Jun 24, 2019
1a25bf3
Recommendation for tab; use consistent wording for menuitemcheckbox, …
zcorpan Jun 24, 2019
6b0984b
Recommendation for tooltip (copied button, NOT alert)
zcorpan Jun 24, 2019
0a87de0
Recommendation for menu (change from Discretionary to Recommended) an…
zcorpan Jun 24, 2019
5e39a2f
Recommendation for grid, tree, treegrid, treeitem
zcorpan Jun 24, 2019
37e7136
Recommendation for gridcell
zcorpan Jun 24, 2019
66095e4
Recommendation for listbox
zcorpan Jun 24, 2019
50c9880
Recommendation for group
zcorpan Jun 24, 2019
7443aa1
Link to issue 26 for role=math
zcorpan Jun 24, 2019
4d990cc
Address feedback: necessity; remove spaces before punctuation
zcorpan Jun 24, 2019
c59cc43
Address feedback: <code> around title and placeholder
zcorpan Jun 24, 2019
774b26c
Address feedback: aria-label is not rendered visually; mention hidden…
zcorpan Jun 24, 2019
8a832bd
Address feedback: alert → button
zcorpan Jun 24, 2019
7f17265
Address feedback: Browsers → browsers
zcorpan Jun 24, 2019
8fb9dbe
Address feedback: labeling → labelling, labeled → labelled
zcorpan Jun 24, 2019
a16cf6b
Address feedback: move a paragraph in fieldset section
zcorpan Jun 24, 2019
972fe21
Address feedback: remove duplicate area alt
zcorpan Jun 24, 2019
47887c0
Address feedback: fix typo falback
zcorpan Jun 24, 2019
8de8e44
Address feedback: clarify aria-labelledby recursion is not chaining
zcorpan Jun 24, 2019
1d38d3b
Address feedback: fix typo an label; fix consistency in aria-label ex…
zcorpan Jun 24, 2019
debb672
Revise description of aria-label to clarify that the string is not vi…
mcking65 Jun 25, 2019
82f3b2f
Minor editorial revision to aria-labelledby feature list
mcking65 Jun 25, 2019
1ee6b09
Change labelled and labelling to labeled and labeling except in aria-…
mcking65 Jun 25, 2019
0797c1e
Change 'necessity' tto 'necessary' in table column description
mcking65 Jun 25, 2019
03f1ee2
Revise naming guidance for document role
mcking65 Jun 25, 2019
be8ed01
Address feedback: typo
zcorpan Jun 25, 2019
bed7986
Recommendation for note
zcorpan Jun 25, 2019
ae5938c
Recommendation for option
zcorpan Jun 25, 2019
f1b5a93
Recommendation for progressbar
zcorpan Jun 25, 2019
0e10d37
Recommendation for radiogroup
zcorpan Jun 26, 2019
50fc11d
Recommendation for region, search
zcorpan Jun 26, 2019
ffc6261
Recommendation for scrollbar
zcorpan Jun 26, 2019
788130a
Recommendation for searchbox, textbox
zcorpan Jun 26, 2019
ef3d1f9
Recommendation for table
zcorpan Jun 26, 2019
a0f4104
Recommendation for tablist
zcorpan Jun 26, 2019
a735dc8
Recommendation for tabpanel
zcorpan Jun 26, 2019
ef6c098
Recommendation for rowgroup (WIP)
zcorpan Jun 26, 2019
9ffece9
Change visible title to visible label
zcorpan Jun 26, 2019
ab3f3cc
Recommendation for scrollbar
zcorpan Jun 26, 2019
9704274
Recommendation for separator
zcorpan Jun 26, 2019
2badb95
Recommendation for status
zcorpan Jun 26, 2019
875a294
Recommendation for toolbar
zcorpan Jun 26, 2019
dee5cec
Notes on how name from content works for treeitem and menuitem
zcorpan Jun 26, 2019
45f39da
Add text and examples for how name from content excludes stuff for tr…
zcorpan Jun 26, 2019
f55702a
Move the example with a hidden element referenced from aria-labelledby
zcorpan Jun 26, 2019
1db2ced
Add math guidance and some editorial revisions
mcking65 Jun 27, 2019
826e12b
Add link to feedback issue 1050
mcking65 Jun 27, 2019
299cab5
Typos
zcorpan Jun 27, 2019
af5793c
Merge branch 'master' into zcorpan/labelling-describing
mcking65 Jun 28, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Next

Guideline for labeling and describing

Fixes #70, fixes #74.
  • Loading branch information...
zcorpan committed Feb 28, 2019
commit de49b6102d87213d84ae17be65c5b54cd76af3cc
@@ -0,0 +1,105 @@
Labeling and Describing

## Labels

A label is used as the accessible name for an element.

This comment has been minimized.

Copy link
@mcking65

mcking65 Feb 28, 2019

Contributor

we may not want to assume the term accessible name is meaningful to readers.

This comment has been minimized.

Copy link
@zcorpan

zcorpan Mar 4, 2019

Author Member

Good point. Filed #996


For elements with certain roles, the label is taken from the element’s contents by default. This can be overridden with a label from the author by using the aria-labelledby or aria-label attributes. If the label from the element’s contents is appropriate, then it should not be overridden with those attributes.

This comment has been minimized.

Copy link
@mcking65

mcking65 Feb 28, 2019

Contributor

consider wording without "should" ... Only override the content if ... or something like that.

Describing what is appropriate or adequate as a label is out of scope, but if we are going to use the word, "appropriate", we should probably link to a w3c resource where that is covered. That might be part of the introductory paragraph.

This comment has been minimized.

Copy link
@zcorpan

zcorpan Mar 4, 2019

Author Member

OK. Is there something appropriate (ahem) we can link to?


In the following example, a link (with default role "link") gets its label from the element’s contents.

```
<a href="/">Home</a>
```


The following roles get the label from the contents by default:

* button

* cell

* checkbox

* columnheader

* gridcell

* heading

* link

* menuitem

* menuitemcheckbox

* menuitemradio

* option

* radio

* row

* rowgroup

* rowheader

* sectionhead

* switch

* tab

* tooltip

* treeitem

If the element’s contents is not appropriate as a label, but there is an element that can be used as the label, then authors should use the aria-labelledby attribute.

In the following example, an element with the "switch" role is labelled by a previous sibling element.

```
<span id="night-mode-label">Night mode</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>
```


In some cases the combination of the element’s contents and another element would be appropriate as a label. In such situations, the aria-labelledby should be used and reference both the element itself and the other element.

This comment has been minimized.

Copy link
@mcking65

mcking65 Feb 28, 2019

Contributor

Beautiful! Very complex concept made super simple!


In the following example, a "read more" link is labelled by the element itself and the article’s heading, resulting in “Read more… 7 ways you can help save the bees”.

```
<h2 id="bees-heading">7 ways you can help save the bees</h2>
<p>Bees are disappearing rapidly.
Here are seven things you can do to help.</p>
<p><a id="bees-read-more aria-labelledby="bees-read-more bees-heading"">Read more...</a></p>
```
This conversation was marked as resolved by zcorpan

This comment has been minimized.

Copy link
@mcking65

mcking65 Feb 28, 2019

Contributor

I wonder if we should state what the resulting label is and briefly explain how it is calculated?

This comment has been minimized.

Copy link
@zcorpan

zcorpan Mar 1, 2019

Author Member

What the resulting label is is stated above the code example (resulting in “Read more… 7 ways you can help save the bees”.). I think I'd like to explain how calculation works in the dedicated subsection below.



If there is no visible label that is appropriate, authors should use the aria-label attribute to set the label for the element.

In the following example, a close button contains an "X" and is given the label “Close” using the aria-label attribute.

```
<button type="button" aria-label="Close">X</button>
```


### Accessible name calculation

aria-label vs aria-labelledby

aria-placeholder, placeholder, title

## Descriptions

aria-describedby

aria-details

aria-roledescription

### Accessible description calculation

aria-describedby, aria-details, aria-placeholder?, placeholder, title
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.