Akadálymentesítési útmutató fejlesztők számára
Az akadálymentesítés fontos a felhasználóink számára, és javíthatunk rajta, ha figyelembe veszünk néhány alapvető ötletet és szabályt. Az akadálymentesítés annyiban nehéz, hogy nincsenek olyan rögzített és általánosan elfogadott technikai szabványok, amelyek valóban következetesen és minden felhasználó számára működnek. Ez az oldal nem sorolja fel és nem tárgyalja a MédiaWiki konkrét hozzáférhetőségi problémáit. Megpróbál a technológiai választásokra, valamint a hozzáférhetőségi problémák megelőzését szolgáló tennivalókra és tiltásokra összpontosítani.
Ami a fejlődést illeti, szerintem ez lehetne a szabálykönyvünk:
- Próbáljuk meg lehetővé tenni a felhasználóink számára ( vagyis mindannyiuk számára).
- Próbáljuk megkerülni a hozzáférhetőségi problémákat, ha lehetséges, de ne mindenáron.
- A progresszív fejlesztés megközelítést kell alkalmaznunk a kegyes degradáció helyett.
- Olyan dolgok megvalósítása, melyek technológiailag megbízhatóak
Hogyan működik a hozzáférhetőség
Néhány fontos fogalom, amit érdemes szem előtt tartani.
A hozzáférhetőségi vizsgálatok számos formája
Az akadálymentesítés számos dologról szól, ezért érdemes figyelembe venni a következőket:
- Valaminek érthetőnek kell lennie: ez szövegesen, vizuálisan, logikailag és összetettségében is értendő.
- Néhány felhasználónak képernyőolvasóra van szüksége az együttműködéshez, de ugyanilyen, ha nem gyakoribbak a következők: nagyító, nagyobb kontraszt, szövegből beszéddé alakítás, egyéni CSS-beállítások vagy egy speciális billentyűzet/beviteli eszköz.
- Elérhetőnek kell lennie; érzékenység, megfizethetőség, elhelyezkedés, nyelv, hardver stb.
Összefoglalva, a hozzáférhetőség nem "csak" billentyűzet-hozzáférhetőség "vagy csak" képernyőolvasó hozzáférhetőség. Gyakran összpontosítunk erre a kettőre, mert ezeket hagyományosan könnyen figyelmen kívül hagyják. De ezek a problémák is megoldhatóak, és gyakran megteremtik az alapját annak, hogy másfajta fejlesztések is lehetségesek legyenek.
Egyes hozzáférhetőségi problémák általában a terméktervezéssel, a stratégiai döntésekkel, a célközönséggel stb. kapcsolatos problémák. Mivel ezeket a területeket nehezebb a MédiaWiki általánosan érvényes szabályokba foglalni, ezért nem tartoznak e dokumentum tárgykörébe.
Navigáció billentyűzettel
Ezt hívjuk billentyűzetes navigációnak, de valójában a következőt jelenti: Ne támaszkodj a mutatós eszközre (érintés, egér).
- A billentyűzetes navigáció a fókusz kezeléséről és a műveletek billentyűzettel történő végrehajtásáról szól.
- A lapozható elemek középpontba helyezhetőek, de nem minden, ami középpontba helyezhető, az lapozható is.
- Mindennek, amit egérrel meg tudsz csinálni, billentyűzettel is meg kell tudnod csinálni.
- A billentyűzetes navigációs információkat a képernyőolvasók használhatják a felhasználói élmény fokozására.
Képernyőolvasó
- A képernyőolvasó más "kurzort" használ, amely általában a DOM logikai struktúráját követi.
- A fókusz hajlamos követni a képernyőolvasó kurzorát és fordítva, de nem azonosak.
- You can keep track of the focused element by setting a live expression in Chrome [1]
- A képernyőolvasó a "hozzáférhetőségi" API-kat használja, melyeket úgy tekinthetünk, mint egy beviteli/kiviteli "nézetet" a normál DOM tetején.
- ARIA olyan DOM jegyzetek, melyek javítják vagy manipulálják a DOM logika átalakítását a hozzáférhetőségi API-kban. Ez nem alternatívája a megfelelő HTML és JavaScript írásának. A billentyűzetes navigáció egyszerűen a logikus DOM sorrenddel érhető elǃ Az ARIA-ról bővebben lásd w3.org magyarázat és MDN magyarázat.
- A képernyőolvasó nem korlátozódik a logikai DOM-struktúra szerinti navigációra, ez csak az alapbeállítás.
- A képernyőolvasó például el tudja olvasni, hogy mi van az egérmutató alatt.
- A VoiceOver for iOS egy képernyő kurzort használ, melyet az érintőképernyőn a hüvelykujj elhelyezésével és mozdulatokkal vezérel.
- A legtöbb képernyőolvasó szoftver további navigációs üzemmóddal rendelkezik, amellyel felsorolhatja és navigálhat a tájékozódási pontok, az automatikusan generált tartalomjegyzék vagy akár az oldalon belüli, felhasználó által meghatározott "könyvjelzők" szerint.
- From the above point of multiple navigation methods, follows: There is a beginning and an end, but also left, right, top and bottom. You should not rely on these in your communication too much, but you don't need to fully deny their existence either. Do not confuse the visual capabilities of the user with spatial awareness that the screen reader might be able to convey to the user. Example:
- a long sentence [image] the above image shows... Still acceptable
- a long sentence [image][image] the left image shows, the right image shows... Still acceptable
- a long sentence [image][image] the right image shows, the left image shows... Not acceptable
- a long sentence [image][image] the above image shows... Not acceptable
- a long sentence [image][image][image] the left image shows, the right image shows... Not acceptable
- a long sentence [image][image] something totally different. the left image shows, the right image shows... Definitely not acceptable
Fejlesztési irányelvek
There are several standards around accessibility and honestly, almost all of them, although sound on identifying issues, still have significant problems when it comes to technical solutions (They have a high ratio of 'ugly workarounds'). This has been cause of much controversy in the communities. As such, we should identify uncontroversial stuff that we should simply always (or never) do and why. It's much easier to reach certain goals if we separate the uncontroversial stuff from the controversial stuff.
Mindig használni vagy biztosítani kell
- Proper semantic HTML element
- Use HTML elements for their intended purpose. For example:
- Use
<button>
and not<div>
or<span>
or<a>
with a click handler - If you feel the need to bold something, consider if it is not more appropriate to use a header or a
strong
element
- Use
- Logical heading structure
- All pages should always have a logical and consistent heading structure. Headings are one of the primary navigation tools used by screen reader users.
- There should be no gaps in the nesting of the heading levels. (So no H2->H4.)
- Headings should be descriptive
- Headings should be unique within their own level. (There should not be two H3s with the same content under the same H2 section)
- There should be separation between navigation and content
alt
attribute for images with meaningful values- If an image is decorative, use an explicit empty value for the alt attribute; even better, turn it into a CSS background image.
- the image alt usually takes precedence over the title attribute of images and even over the title attribute of links that wrap an image.
title
attribute for links- These are usually shown as the tooltips
- Only use titles if they differ from the link text.
- Most link titles are not actually spoken by screen readers, unless the reader has been explicitly configured this way.
lang
,dir
andhreflang
attributes- Using
lang
andhreflang
enables selecting a proper voice in screen readers, picks the right spelling correction in browsers etc.
- Sufficient contrast
- Always check your colors for sufficient contrast. For text, a higher contrast is needed for smaller text (due to anti-aliasing).
- Focus for keyboard navigation
- Do not remove outline from focusable elements unless you define your own outline for the
:focus
state.- Don't use
outline: 0
otherwise. - If you define any pseudo class, like
:hover
or:active
, please also define a:focus
style.
- Don't use
- Keyboard navigation
- Interactive elements of a page should be navigable by keyboard. Please make sure tab key navigation is enabled in your browser and allows you to control each interactive element without making use of a pointing device.
- Use
tabIndex: 0
to make elements keyboard accessible, which are not keyboard accessible implicitly (Anything but<a>
,<area>
,<button>
,<input>
,<object>
,<select>
,<textarea>
).- In this case also add a keydown handler responding to Enter (keyCode 13) and space (keyCode 32).
- Use
tabindex: -1
to remove elements from accessibility. (use this on links that are labels for the action inside an<li>...</li>
for instance) - Elements that are implicitly keyboard accessible will forward enter/space keydown to the click handler
- Use
- Dialogs etc.
When not taking good care of accessibility, dialogs are some of the most inaccessible elements for screen reader and keyboard users. Spend some time on this.
- The element that opens the dialog should have
aria-haspopup
- The dialog itself should have
role=[dialog | alertdialog | tooltip]
- The dialog should be inserted in DOM order,[1] or aria owns/controls needs to specify this relation between opening element and dialog
- When opening the dialog, remember last focused element and shift focus to the first
focusabletabbable element inside the dialog - When the dialog is modal, make it impossible to interact with the rest of the page
- Capture clicks outside the dialog and ignore them or let them dismiss the dialog
- Make sure you cannot tab to links or input elements outside of dialog
- Make elements outside of the dialog unreachable for screen reader, by using aria-hidden
- Make sure there is a close mode (Esc key and a focusable close button with a descriptive title)
- Closing should return the (keyboard) focus to the original focus point that you stored when you opened the dialog. For screen readers to return to the same point, be sure to specify the right owner of the dialog, if you have not inserted the dialog in DOM order.
- Read up: Aria modals, Aria modal dialog, ARIA nonmodal dialog, ARIA tooltips.
- WCAG 2.1 guidelines
- Follow wherever possible
- And its accompanying documents:
Ne csináld!
- There is common advice to use
left: -1000px
to push something (often the labels of icon buttons) out of the viewport for visual users and still have it in the accessibility DOM.text-indent: -9999px
is variant of this. This is BAD advice.- This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. (If needed,
top: -1000px
is preferred overleft: -1000px
to avoid this). - VoiceOver on mobile is unable to use this text as a fallback, since it is a 'positional' screen reader. You cannot move your finger over this text and thus the text will not be read either. (aria-label is often the better choice).
- Lastly, this enlarges the render surface needed to calculate the final webpage and this can impact performance [2] on mobile devices.
- Insightful overview of 'hide text offscreen' tricks are given by Jonathan Snook.
- This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. (If needed,
- Things should not be repeated often. If you have a 100 links on a page that can open a dialog, then don't add 100 labels to those 100 links telling the user that it can be used to open a dialog. Telling a user how to use/what to do with the interface is a good thing, doing it consistently is simply annoying. Find a different way to explain it once (an
aria-live=polite
might be an idea in this case ?). <a href="#">Hide</a>
with an onclick handler. VO reads such JS as "internal link Hide". Use a proper button, or<a role="button" tabindex="0">Hide</a>
, with 'Space' and 'Enter' key handlers in the onclick. But no href attribute.- Do not nest interactive functionality inside another interactive element (links or buttons inside links). This confuses screen readers.
Elkerülni
- Unicode symbols
- Most assistive technologies are not good with symbols. Therefore, try to avoid characters such as ↑, → or more complex characters, because many screen reader won't understand them. If they are required, try to wrap with a span element with the title attribute, so that the title attribute can communicate the implicit meaning within the context to the reader.
- Small fonts
- Legibility is preferred. If you make something so small that it is hard to read, do you even need it to begin with? Also avoid small fonts with low or mediocre contrast values (even if they fall inside the WCAG guidelines, small sizes require more explicit contrast then large sizes, especially with anti aliasing enabled).
- Unusually large fonts
- If you make text much larger than normal, it can become similarly hard to read (unless it's very short). This applies mostly to body text, or anything that takes up more than a couple lines. But the larger the text is, the more lines it will take up.
- tabIndex > 0
- DOM order is preferred wherever possible. DOM order provides context for the actions.
- Workaround
- Traditionally, accomplishing 'full' accessibility has required a lot of workarounds for html itself, the browsers and even specific screenreader software. However these workarounds often come with side effects, make use of bugs or unspecified behavior and inevitably create technical debt.
- MediaWiki, because of the users it seeks to serve, the amount of code, it's (lack) of funding, etc tends to prefer future proof code over code that easily breaks. As such it generally avoids workarounds even if that might sometimes limit the accessibility we can deliver. Decisions on this are often influenced by the relative audience of the feature in MediaWiki. If something is ubiquitous for all users a workaround is more warrented than if the feature affected is only used by a tiny part of the audience (for instance, reading a page vs modifying the configuration of the installation).
Megfontolni
- ARIA Roles
- If a div or span behaves like an actual button use
role="button"
. alsorole="dialog"
androle="alert"
- Be careful with roles. For instance, don't add
role="button"
to a<th>
element, since the<th>
element has an implicitrole="columnheader"
, which will be overwritten. Instead use nested elements. Similarly for<li>
which has an implicitrole="listitem"
- If a button creates a popupdialog, use
aria-haspopup
. - Use
aria-labelled-by
for contexts where this is not fully logical by itself (so everywhere except for labels in forms and headers in tables).
- If a div or span behaves like an actual button use
- Avoid tables for layout purposes and test on smaller screen widths.
- hide stuff: https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/
- skip/jump to links
Lásd még
- Wikimedia Design Style Guide: Accessibility principles
- Open bugs and feature requests related to the accessibility in MediaWiki and other Wikimedia software
- W3C Web Accessibility Initiative: Tips for Getting Started
- W3C Web Accessibility Initiative: Web Accessibility Evaluation Tools List
- Firefox Developer Tools: Accessibility Inspector
- Chrome Developer Tools: Accessibility features
- Accessibility and usability cleanup
- Blogposts
- Software
- WAVE, a Web accessibility evaluation tool
- Accessibility simulation on MediaWiki. Experience a page as a color blind person would experience it.
- https://www.deque.com/axe/ browser extension for accessibility auditing a page
- https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ webapp for accessibility auditing. See also https://www.powermapper.com/tests/
- University of Cambridge - Impairment simulator software (Microsoft Windows only)
- Guides by 3rd parties
- Designing accessible services by UK Home Office
- Inclusive Design by Microsoft