Accessibility attributes are missing
mattesmohr opened this issue · comments
The attributes for accessibility (https://www.w3.org/TR/wai-aria-1.1/) aren't implemented yet.
For documentation reasons:
Variant 1 | Variant 2 | Variant 3 | Variant 4 | Variant 5 |
---|---|---|---|---|
.ariaActiveDescendant(String) | .aria(activedescendat: String) | .activeDescendant(String) | ||
.ariaAtomic(Bool) | .aria(atomic: Bool) | .atomic(Bool) | .isAtomic(Bool) | |
.ariaAutoComplete(Token) | .aria(autocomplete: Token) | .autocomplete(Token) | ||
.ariaBusy(Bool) | .aria(busy: Bool) | .busy(Bool) | .isBusy(Bool) | |
.ariaChecked(Token) | .aria(checked: Token) | .checked(Token) | ||
.ariaColumnCount(Int) | .ariaColumn(count: Int) | .aria(columncount: Int) | .columnCount(Int) | |
.ariaColumnIndex(Int) | .ariaColumn(index: Int) | .aria(columnindex: Int) | .columnIndex(Int) | |
.ariaColumnSpan(Int) | .ariaColumn(span: Int) | .aria(columnspan: Int) | .columnSpan(Int) | |
.ariaControls(String) | .aria(controls: String) | .controls(String) | ||
.ariaCurrent(Token) | .aria(current: Token) | .current(Token) | ||
.ariaDetails(String) | .aria(details: String) | .details(String) | ||
.ariaDescribedBy(String) | .ariaDescribed(by: String) | .aria(described: String) | .describedBy(String) | |
.ariaDisabled(Bool) | .aria(disabled: Bool) | .disabled(Bool) | .isDisabled(Bool) | |
.ariaErrorMessage(String) | .aria(error: String) | .errorMessage(String) | ||
.ariaExpanded(Bool) | .aria(expanded: Bool) | .expanded(Bool) | .isExpanded(Bool) | |
.ariaFlowTo(String) | .aria(flowto: String) | .flowTo(String) | ||
.ariaHasPopup(Bool) | .aria(popup: Bool) | .hasPopup(Bool) | ||
.ariaHidden(Bool) | .aria(hidden: Bool) | .hidden(Bool) | .isHidden(Bool) | |
.ariaInvalid(Bool) | .aria(invalid: Bool) | .invalid(Bool) | .isInvalid(Bool) | |
.ariaKeyShortCuts(String) | .aria(keyshortcuts: String) | .keyShortcuts(String) | ||
.ariaLabel(String) | .aria(label: String) | .label(String) | ||
.ariaLabeledBy(String) | .ariaLabeled(by: String) | .aria(labeled: String) | .labeledBy(String) | .labeled(by: String) |
.ariaLevel(Int) | .aria(level: Int) | .level(Int) | ||
.ariaModal(Bool) | .aria(modal: Bool) | .modal(Bool) | .isModal(Bool) | |
.ariaMultiline(Bool) | .aria(multiline: Bool) | .multiline(Bool) | .isMultiline(Bool) | |
.ariaMultiSelectable(Bool) | .aria(multiselect: Bool) | .multiselectable(Bool) | .isMultiSelectable(Bool) | |
.ariaOrientation(Token) | .aria(orientation: Token) | .orientation(Token) | ||
.ariaOwns(String) | .aria(owns: String) | .owns(String) | ||
.ariaPlaceholder(String) | .aria(placeholder: String) | .placeholder(String) | ||
.ariaPositionInset(Int) | .aria(positioninset: Int) | .positionInset(Int) | ||
.ariaPressed(Token) | .aria(pressed: Token) | .pressed(Token) | ||
.ariaReadyOnly(Bool) | .aria(readonly: Bool) | .readonly(Bool) | .isReadyonly(Bool) | |
.ariaRelevant(Token) | .aria(relevant: Token) | .relevant(Token) | ||
.ariaRequired(Bool) | .aria(required: Bool) | .required(Bool) | .isRequired(Bool) | |
.ariaRoleDescription(String) | .aria(roledescription: String) | .roleDescription(String) | ||
.ariaRowCount(Int) | .ariaRow(count: Int) | .aria(rowcount: Int) | .rowCount(Int) | |
.ariaRowIndex(Int) | .ariaRow(index: Int) | .aria(rowindex: Int) | .rowIndex(Int) | |
.ariaRowSpan(Int) | .ariaRow(span: Int) | .aria(rowspan: Int) | .rowSpan(Int) | |
.ariaSelected(Token) | .aria(selected: Token) | .rowSelected(Token) | ||
.ariaSetSize(Int) | .aria(setsize: Int) | .setSize(Int) | ||
.ariaSort(Token) | .aria(sort: Token) | .sort(Token) | ||
.ariaValueMaximum(Float) | .ariaValue(maximum: Float) | .aria(valuemaximum: Float) | .maximumValue(Float) | |
.ariaValueMinimum(Float) | .ariaValue(minimum: Float) | .aria(valueminimum: Float) | .minimumValue(Float) | |
.ariaValueNow(Float) | .ariaValue(now: Float) | .aria(valuenow: Float) | .valueNow(Float) | |
.ariaValueText(String) | .ariaValue(text: String) | .aria(valuetext: String) | .valueText(String) |
Hey @MatsMoll, I think I need another opinion on this. I would like to add accessibility attributes to HTMLKit.
So I went through the documentation and I was hoping I could implement them the same way, as I did with the event attributes lately.
Tag {
}
.on(event: .drag, "")
But the aria attributes have not the same value type, wich on the event attributes is always String
. So I have to implement them differently.
We usually do something like
Tag {
}
.camelCase()
right? So I listed all the variants, I could think of, in the previous post. I would like to hear you opinion, wich of the variant you like the most.
Variant 1 and Variant 2 is like we would normally do.
Variant 3 is more like the implementation of the event attributes. Seeing .on
and .aria
as one single attribute.
Variant 4 and 5 is like the first and the second but without the hint about the aria-attribute.
I know its more like a question about "style", so don't rip my head off. :-D
Tag {
}
.id("tag)
.class("test test-style")
.ariaLabeled("Test")
.ariaModal(true)
Tag {
}
.id("tag)
.class("test test-style")
.aria(labeled: "Test")
.aria(modal: true)
Hmm.. 🤔
Personally do I like the .aria(model: true)
syntax, as I find it clearer to separate the "generic" aria
from the more "important" model
or what ever it is.
So I would maybe like the variant 3 with camel case in the attribute name ass well. E.g: .aria(columnCount: Int)
. Or would that be a bit odd?
Hmm.. 🤔
Personally do I like the
.aria(model: true)
syntax, as I find it clearer to separate the "generic"aria
from the more "important"model
or what ever it is.So I would maybe like the variant 3 with camel case in the attribute name ass well. E.g:
.aria(columnCount: Int)
. Or would that be a bit odd?
I will try it out and let you know. Thank you 👍
For documentation reasons:
Element | Implicit Role | Additional Roles | Attributes |
---|---|---|---|
Abbreviation (abbr) | - | any | global, aria-* |
Address | - | any | global, aria-* |
Anchor (a) | link | button, checkbox, menuitem* | global, aria-* |
Area | link | - | global, aria-* |
Article | article | application, document, feed, main, none, presentation, region | global, aria-* |
Aside | complementary | feed, none, note, presentation, region, search | global, aria-* |
Audio | - | application | global, aria-* (application) |
Base | - | - | - |
Bdi | - | any | global, aria-* |
Bdo | - | any | global, aria-* |
Blockquote | - | any | global, aria-* |
Body | - | - | global, aria-* (document) |
Bold (b) | - | any | global, aria-* |
Button | button | checkbox, link, menuitem*, option, radio, switch, tab | global, aria-* |
Canvas | - | any | global, aria-* |
Caption | - | - | global |
Cite | - | any | global, aria-* |
Code | - | any | global, aria-* |
Column (col) | - | - | - |
ColumnGroup (colgroup) | - | - | - |
Data | - | any | global, aria-* |
DataCell (td) | cell, gridcell | any | global, aria-* |
DataList | listbox | - | global, aria-* (listbox) |
Definition (dfn) | term | any | global, aria-* |
DeletedText (del) | - | any | global, aria-* |
DescriptionList (dl) | - | group, list, presentation, none | global, aria-* |
Details | group | - | global, aria-* (group) |
Dialog | dialog | alertdialog | global, aria-* (dialog) |
Division (div) | - | any | global, aria-* |
Embed | - | application, document, img, presentation, none | global, aria-* |
Emphasize (em) | - | any | global, aria-* |
Fieldset | group | none, presentation, radiogroup | global, aria-* |
Figure | figure | any | global, aria-* |
FigureCaption | - | group, presentation, none | global, aria-* |
Footer | contentinfo | group, none, presentation | global, aria-* |
Form | form | search, none, presentation | global, aria-* |
Head | - | - | - |
Header | banner | group, none, presentation | global, aria-* |
HeaderCell (th) | columnheader, rowheader, cell, gridcell | any | global, aria-* |
Heading1 (h1) | heading | none, presentation, tab | global, aria-* |
Heading2 (h2) | heading | none, presentation, tab | global, aria-* |
Heading3 (h3) | heading | none, presentation, tab | global, aria-* |
Heading4 (h4) | heading | none, presentation, tab | global, aria-* |
Heading5 (h5) | heading | none, presentation, tab | global, aria-* |
Heading6 (h6) | heading | none, presentation, tab | global, aria-* |
HeadingGroup (hgroup) | - | any | global, aria-* |
HorizontalRule (hr) | separator | none, presentation | global, aria-* (separator) |
Html | document | - | - |
Image (img) | img, presentation | button, checkbox, link, menuitem*, option, progressbar | global, aria-* |
InlineFrame (iframe) | - | application, document, img, none, presentation | global, aria-* |
Input | |||
InsertedText (ins) | - | any | global, aria-* |
Italic (i) | - | any | global, aria-* |
KeyboardInput (kbd) | - | any | global, aria-* |
Label | - | - | global |
Legend | - | - | global |
LineBreak (br) | - | presentation, none | global, aria-* |
Link | - | - | - |
ListItem (li) | listitem | menuitem*, option, none, presentation, radio, separato, tab, treeitem | global, aria-* |
Main | main | - | global, aria-* (main) |
Map | - | - | - |
Mark | - | any | global, aria-* |
Meta | - | - | - |
Meter | - | - | global |
Navigation (nav) | navigation | menu, menubar, tablist | global, aria-* |
NoScript | - | - | - |
Object | - | application, document, img | global, aria-* |
OrderedList (ol) | list | directory, group, listbox, menu, menubar, none, presentation | global, aria-* |
Option | option | - | global, aria-* (option) |
OptionGroup (optgroup) | group | - | global, aria-* (group) |
Output | status | any | global, aria-* |
Paragraph (p) | - | any | global, aria-* |
Parameter (param) | - | - | - |
Picture | - | - | - |
PreformattedText (pre) | - | any | global, aria-* |
Progress | progressbar | - | global, aria-* (progressbar) |
Ruby | - | any | global, aria-* |
RubyText (rt) | - | any | global, aria-* |
RubyPronunciation (rp) | - | any | global, aria-* |
SampleOutput | - | any | global, aria-* |
Script | - | - | - |
Section | region | alert*, application, banner, complementary, contentinfo, dialog | global, aria-* (combobox, listbox) |
Select | combobox, listbox | menu | |
ShortQuote (q) | - | any | global, aria-* |
Small | - | any | global, aria-* |
Strong (s) | - | any | global, aria-* |
Span | - | any | global, aria-* |
Subscript | - | any | global, aria-* |
Summary | button | - | global, aria-* (button) |
Superscript | - | any | global, aria-* |
Style | - | - | - |
Source | - | - | - |
Table | table | any | global, aria-* |
TableBody (tbody) | rowgroup | any | global, aria-* |
TableHead (thead) | rowgroup | any | global, aria-* |
TableFoot (tfoot) | rowgroup | any | global, aria-* |
TableRow (tr) | row | any | global, aria-* |
Template | - | - | - |
TermName (dt) | term | listitem | global, aria-* |
TermDefinition (dd) | definition | - | global, aria-* (definition) |
TextArea | textbox | - | global, aria-* (textbox) |
Time | - | any | global, aria-* |
Title | - | - | - |
Track | - | - | - |
Underline (u) | - | any | global, aria-* |
UnorderedList (ul) | list | directory, group, listbox, menu, menubar, none, presentation | global, aria-* |
Variable (var) | - | any | global, aria-* |
Video | - | application | global, aria-* (application) |
WordBreak (wbr) | - | any | global, aria-* |