Diferencia entre revisiones de «dev/Accesibilidad»

De MoodleDocs
(tidy up)
m (Texto reemplazado: «class="nicetable"» por «class="wikitable"»)
 
(No se muestran 15 ediciones intermedias de otro usuario)
Línea 1: Línea 1:
{{Pendiente de traducir}}
{{Frequently updated page translation
'''Nota del traductor: Esta documentación es la traducción de la página sobre usabilidad de la documentación en inglés para desarrolles sobre usabilidad. Si Usted quiere ver la información para usuarios sobre usabilidad vea [[Usabilida]]'''.
|devpagetitle = Accessibility
}}
{{Pendiente de traducir}}{{Actualizar}}
'''Nota del traductor: Esta documentación es la traducción de la página sobre accesabilidad de la documentación en inglés para desarrolladores. Si Usted quiere ver la información para usuarios sobre accesabilidad vea [[Accesibilidad]]'''.


==Accesibilidad: Documentación para desarrolladores==
==Accesibilidad: Documentación para desarrolladores==
Línea 13: Línea 16:
* [http://www.w3.org/WAI/intro/accessibility.php Web Accessibility Initiative's ''Introduction to Web Accessibility'']
* [http://www.w3.org/WAI/intro/accessibility.php Web Accessibility Initiative's ''Introduction to Web Accessibility'']
* [http://diveintoaccessibility.info/ Mark Pilgrim's ''Dive into Accessibility'']
* [http://diveintoaccessibility.info/ Mark Pilgrim's ''Dive into Accessibility'']
* [http://joeclark.org/book/ Joe Clark's ''Building Accessible Websites'' book]
* [http://joeclark.org/book/ Joe Clark's ''Building Accessible Websites'' book]  


== Moodle Collaborative Accessibility Group ==
== Moodle Accessibility Collaboration Group ==
To improve the accessibility/usability of this learning management system, we have established this collaboration group to work together with Moodle developers, administrators, IT professionals, and other interested entities and individuals. We welcome anyone who is interested in improving the accessibility of Moodle to join this group. You don’t need to be a technical guru or accessibility expert to join; however, it is expected that you are familiar with the basics of accessibility and are willing to dedicate a few hours each month to this collaboration effort.
To improve the accessibility and usability of Moodle, we have established this collaboration group to work together with Moodle developers, accessibility experts, administrators, IT professionals, and other interested entities and individuals. We welcome anyone who is interested in improving the accessibility of Moodle to join this group. You don’t need to be a technical guru or accessibility expert to join; however, it is expected that you are familiar with the basics of accessibility and are willing to dedicate a few hours each month to this collaboration effort.
 
We meet once a month to discuss accessibility priorities, typically on the first Monday of each month.  


Visit http://collaborate.athenpro.org/group/moodle to join the mailing list.
Visit http://collaborate.athenpro.org/group/moodle to join the mailing list.


We meet in regional groups once a month to discuss accessibility priorities for each region. Regions meet at the following times:
To review past meetings or to see up coming meetings visit http://collaborate.athenpro.org/group/moodle/teleconferences/
 
* Norte América: We meet on the 3rd Monday of each month at 12pm USA Pacific Daylight Saving Time/7pm UTC. (Time zone converter: http://www.worldtimebuddy.com/)
* Europa: Buscando liderazgo y miembros
* Asia Pacífico: Buscando liderazgo y miembros
* América Latina: Buscando liderazgo y miembros
 
To review past regional meetings or to see up coming meetings visit http://collaborate.athenpro.org/group/moodle/teleconferences/


== Moodle-related accessibility coding guidelines ==
== Moodle-related accessibility coding guidelines ==


; Use CSS, but still use headings, strong and emphasis
; Use CSS, but still use headings, strong and emphasis
: It is generally a good idea to separate a document's content HTML from how it is presented using CSS. There are some tags that affect a document's presentation but also contribute to the structure and meaning of the content. These tags should remain in HTML. This includes heading tags <code>&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;...</code>, which are used to form the document's hierarchical structure, and <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> tags, which are used to add meaning to sections of text.
: It is generally a good idea to separate a document's content HTML from how it is presented using CSS. There are some tags that affect a document's presentation but also contribute to the structure and meaning of the content. These tags should remain in HTML. This includes heading tags <code><h1>, <h2>, <h3>...</code>, which are used to form the document's hierarchical structure, and <code><strong></code> and <code><em></code> tags, which are used to add meaning to sections of text.
; Avoid using background images for important information
; Avoid using background images for important information
: Users of non-visual browsers cannot see images. They can read the <code>alt</code> tags of normal images, but background images are not presented like normal images.
: Users of non-visual browsers cannot see images. They can read the <code>alt</code> tags of normal images, but background images are not presented like normal images.
; Image <code>alt</code> and <code>title</code> attributes
; Image <code>alt</code> and <code>title</code> attributes
* An <code>alt</code> attribute is required (even if empty) on all images.
* An <code>alt</code> attribute is required (even if empty) on all images.
* If a link is wrapping an <code>&lt;img&gt;</code>, the <code>&lt;img&gt;</code> does not need a <code>title</code> attribute if the link has one.
* If a link is wrapping an <code><img></code>, the <code><img></code> does not need a <code>title</code> attribute if the link has one.
* The <code>alt</code> for an image and the <code>title</code> for its surrounding link should usually differ. An image <code>alt</code> attribute provides a text equivalent to an image, whereas a <code>title</code> attribute adds supplementary information about the purpose or action associated with an image link. Simply repeating the same text in <code>alt</code> and <code>title</code> attributes adds little and can be annoying for screen reader users.
* The <code>alt</code> for an image and the <code>title</code> for its surrounding link should usually differ. An image <code>alt</code> attribute provides a text equivalent to an image, whereas a <code>title</code> attribute adds supplementary information about the purpose or action associated with an image link. Simply repeating the same text in <code>alt</code> and <code>title</code> attributes adds little and can be annoying for screen reader users.
; Links and buttons should be selectable and easily click-able
; Links and buttons should be selectable and easily click-able
Línea 53: Línea 51:
; Avoid using colour alone to express meaning
; Avoid using colour alone to express meaning
: Colour-blind users need additional information to gain meaning if colour is used as the emphasising feature. Also keep in mind that colours can have differing significance in different cultures, so colours should be configurable either through settings or language files.
: Colour-blind users need additional information to gain meaning if colour is used as the emphasising feature. Also keep in mind that colours can have differing significance in different cultures, so colours should be configurable either through settings or language files.
; Use sufficient color contrast when adding color to text. See Tracker ticket MDL 522391: https://tracker.moodle.org/browse/MDL-52391.
; Role for button-type links
; Role for button-type links
: If a link acts as a button (not forwarding to another page, which is often the case when combined with Javascript), it should declare the ''role'' attribute ''button''. Also, as a button is usually triggered by the Space bar, the Javascript should add proper event listeners on the link to accept this key. Read more at [https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role Mozilla Developer Network]
: If a link acts as a button (not forwarding to another page, which is often the case when combined with Javascript), it should declare the ''role'' attribute ''button''. Also, as a button is usually triggered by the Space bar, the Javascript should add proper event listeners on the link to accept this key. Read more at [https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role Mozilla Developer Network]
Línea 83: Línea 82:
* [http://www.parliament.the-stationery-office.co.uk/pa/ld200001/ldbills/003/2001003.htm SENDA - Special Educational Needs and Disability Act/Bill]
* [http://www.parliament.the-stationery-office.co.uk/pa/ld200001/ldbills/003/2001003.htm SENDA - Special Educational Needs and Disability Act/Bill]
* [http://www.opsi.gov.uk/acts/acts1995/1995050.htm Disability Discrimination Act 1995] (now merged ino the Equality Act 2010).
* [http://www.opsi.gov.uk/acts/acts1995/1995050.htm Disability Discrimination Act 1995] (now merged ino the Equality Act 2010).
* [http://www.southampton.ac.uk/web4all/standards/BS_16steps/ BS 8878:2010 – 16 Steps for an accessible web product]
* [https://www.access8878.co.uk/getting-started-with-bs-8878/16-steps.aspx BS 8878:2010 – 16 Steps for an accessible web product]


=== Germany ===
=== Germany ===
* [http://www.einfach-fuer-alle.de/artikel/bitv/ Barrierefreie Informationstechnik-Verordnung - BITV]
* [http://www.einfach-fuer-alle.de/artikel/bitv/ Barrierefreie Informationstechnik-Verordnung - BITV]
=== France ===
* [https://references.modernisation.gouv.fr/rgaa-accessibilite/ Référentiel Général d’Accessibilité des Administrations - RGAA]
===European Union===
===European Union===
* [https://ec.europa.eu/digital-agenda/en/news/proposal-directive-european-parliament-and-council-accessibility-public-sector-bodies-websites Proposal for a Directive of the European Parliament and of the Council] on the accessibility of public sector bodies' websites.
* [https://ec.europa.eu/digital-agenda/en/news/proposal-directive-european-parliament-and-council-accessibility-public-sector-bodies-websites Proposal for a Directive of the European Parliament and of the Council] on the accessibility of public sector bodies' websites.
Línea 94: Línea 97:
=== Firefox extensions ===
=== Firefox extensions ===
* [http://firefox.cita.uiuc.edu/ Firefox Accessibility Extension] by the Illinois Center for Information Technology and Web Accessibility (iCITA)
* [http://firefox.cita.uiuc.edu/ Firefox Accessibility Extension] by the Illinois Center for Information Technology and Web Accessibility (iCITA)
* [https://docs.moodle.org/dev/Web_developer_extension Web developer extension] para  [https://docs.moodle.org/dev/Firefox Firefox]
* [https://docs.moodle.org/dev/Web developer extension] for [https://docs.moodle.org/devFirefox]
* [https://docs.moodle.org/dev/Blank_Your_Monitor_and_Easy_Reading_extension_for_Firefox Blank_Your_Monitor_and_Easy_Reading_extension_for_Firefox|Blank Your Monitor and Easy Reading Extension] for Firefox
* [https://docs.moodle.org/devBlank_Your_Monitor_and_Easy_Reading_extension_for_Firefox Blank Your Monitor and Easy Reading Extension] for Firefox
* [http://www.deque.com/products/worldspace-fireeyes/download-worldspace-fireeyes|FireEye plugin for Firebug]
* [http://www.deque.com/products/worldspace-fireeyes/download-worldspace-fireeyes|FireEye plugin for Firebug]
* [https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker|Color contrast plugin for Firefox]
* [https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker|Color contrast plugin for Firefox]
Línea 102: Línea 105:
* [https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll Color Contrast Analyzer]
* [https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll Color Contrast Analyzer]
* [https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph High contrast]
* [https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph High contrast]
* [https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd/related ChromeLens]
* [https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn SEE]
* [https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb Accessibility developer tools]


=== Accessibility validation tools ===
=== Accessibility validation tools ===
* [https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en Chrome Accessibility Developer Tooks]
* [https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en Chrome Accessibility Developer Tooks]
* [https://docs.moodle.org/dev/W3C_validation W3C validation] (for [[HTML in Moodle]], [[CSS]] and [[RSS]])  
* [https://docs.moodle.org/devW3C validation] (for [https://docs.moodle.org/devHTML in Moodle], [https://docs.moodle.org/devCSS] and [https://docs.moodle.org/devRSS])  
* [http://wave.webaim.org/ Web accessibility evaluation tool]
* [http://wave.webaim.org/ Web accessibility evaluation tool]
* [http://cynthiasays.com/ Cynthia Says accessibility checker]
* [http://cynthiasays.com/ Cynthia Says accessibility checker]
* [https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd AXE]
* [https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh WAVE]


=== Screen readers ===
=== Screen readers ===
Since 2.7, Moodle officially supports the following screen reader/browser configurations (MDL-44002):
{| class="wikitable"
|-
! Browser
! Screen reader
! Minimum version
! Recommended version
|-
| [http://windows.microsoft.com/en-AU/internet-explorer/download-ie Microsoft Internet Explorer]
| [http://www.freedomscientific.com/products/fs/jaws-product-page.asp Jaws]
| 15
| Latest
|-
| [http://www.mozilla.org/en-US/ Mozilla Firefox]
| [http://www.nvaccess.org/ NVDA]
| 2014.1
| Latest
|}
Other tools and resources:
* [http://www.standards-schmandards.com/projects/fangs/ Fangs – the screen reader emulator] for Firefox
* [http://www.standards-schmandards.com/projects/fangs/ Fangs – the screen reader emulator] for Firefox
* [http://www.nvda-project.org/ NVDA NonVisual Desktop Access] - open source screen reader for Windows
* [http://webaim.org/projects/screenreadersurvey4// WebAIM Screen reader survey] (Predominance of tools, browsers, OSs used by accessibility users)
* [http://webaim.org/projects/screenreadersurvey4// WebAIM Screen reader survey] (Predominance of tools, browsers, OSs used by accessibility users)
* [http://www.chromevox.com/index.html ChromeVox] - Available in several languages for Linux, Windows and Mac OS, only on Chrome browser. (Android mobile users can use [https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback TalkBack])


See also this [http://www.w3.org/WAI/ER/tools/complete long list of accessibility tools].
See also this [http://www.w3.org/WAI/ER/tools/complete long list of accessibility tools].
Línea 129: Línea 157:
* [http://juicystudio.com/article/validity-accessibility.php ''Validity and Accessibility'']
* [http://juicystudio.com/article/validity-accessibility.php ''Validity and Accessibility'']
* [http://www.edtec.unsw.edu.au/inter/support/accessibility/access_vids.cfm Videos showing as student accessing another Learning Management System via Screen Reader software]
* [http://www.edtec.unsw.edu.au/inter/support/accessibility/access_vids.cfm Videos showing as student accessing another Learning Management System via Screen Reader software]


== See also ==
== See also ==
Línea 149: Línea 178:


[[dev:Accessibility|Accessibility for Moodle Developers]]
[[dev:Accessibility|Accessibility for Moodle Developers]]
[[en:Accessibility]]

Revisión actual - 15:23 10 ago 2021

Nota: Esta es una traducción de una página de la documentación para desarrolladores (Developer docs), que se considera particularmente importante, y que en su versión original se actualiza frecuentemente. Por ello, se le recomienda que revise la página original en idioma inglés: Accessibility.

Nota: Pendiente de Traducir. ¡Anímese a traducir esta página!.     ( y otras páginas pendientes)

Esta página necesita actualizarse con la información existente en la documentación vigente/moderna/actualizada en el idioma inglés original para Moodle. Se le sugiere al lector que consulte la página original en idioma inglés cuyo enlace está al fondo de esta página. y que, por favor, actualice esta información y quite la plantilla {{Actualizar}} cuando haya terminado.     (otras páginas pendientes de actualizar)


Nota del traductor: Esta documentación es la traducción de la página sobre accesabilidad de la documentación en inglés para desarrolladores. Si Usted quiere ver la información para usuarios sobre accesabilidad vea Accesibilidad.

Accesibilidad: Documentación para desarrolladores

Nota: Esta es una traducción de una página de la documentación para desarrolladores (Developer docs), que se considera particularmente importante, y que en su versión original se actualiza frecuentemente. Por ello, se le recomienda que revise la página original en idioma inglés: Accessibility.

Los sitios Web construidos con accesibilidad en mente son flexibles para cumplir las diferentes necesidades de los usuarios, sus preferencias y situaciones. A pesar de que estos métodos pueden aumentar la usabilidad para todos los usuarios de la Web, a menudo es requerido legalmente que se implementen en un esfuerzo específico para prevenir la discriminación en contra de personas con discapacidades.

Puntos de arranque

These are some readable introductions to accessibility that cover; what accessibility is, why it is important, as well as practical advice.

Moodle Accessibility Collaboration Group

To improve the accessibility and usability of Moodle, we have established this collaboration group to work together with Moodle developers, accessibility experts, administrators, IT professionals, and other interested entities and individuals. We welcome anyone who is interested in improving the accessibility of Moodle to join this group. You don’t need to be a technical guru or accessibility expert to join; however, it is expected that you are familiar with the basics of accessibility and are willing to dedicate a few hours each month to this collaboration effort.

We meet once a month to discuss accessibility priorities, typically on the first Monday of each month.

Visit http://collaborate.athenpro.org/group/moodle to join the mailing list.

To review past meetings or to see up coming meetings visit http://collaborate.athenpro.org/group/moodle/teleconferences/

Moodle-related accessibility coding guidelines

Use CSS, but still use headings, strong and emphasis
It is generally a good idea to separate a document's content HTML from how it is presented using CSS. There are some tags that affect a document's presentation but also contribute to the structure and meaning of the content. These tags should remain in HTML. This includes heading tags

,

,

..., which are used to form the document's hierarchical structure, and and tags, which are used to add meaning to sections of text.

Avoid using background images for important information
Users of non-visual browsers cannot see images. They can read the alt tags of normal images, but background images are not presented like normal images.
Image alt and title attributes
  • An alt attribute is required (even if empty) on all images.
  • If a link is wrapping an <img>, the <img> does not need a title attribute if the link has one.
  • The alt for an image and the title for its surrounding link should usually differ. An image alt attribute provides a text equivalent to an image, whereas a title attribute adds supplementary information about the purpose or action associated with an image link. Simply repeating the same text in alt and title attributes adds little and can be annoying for screen reader users.
Links and buttons should be selectable and easily click-able
  • An image used as an icon for a user to click should be large enough so that the user can click on it easily.
  • Users should be able to navigate to all links and buttons using the keyboard.
  • Generally we should avoid having two buttons/links that achieve the same action in the same area. This can be annoying and confusing for users of screen readers.
Support dynamic interaction with ARIA attributes
Events triggered by AJAX and JavaScript can be less obvious to users of non-visual browsers. ARIA attributes can assist users of such browsers to follow a dynamic change.
Use labels with inputs
Context can easily be lost without a visual presentation. Labels are needed on all input input elements (except button) to describe their purpose in a form. Labels should be unique on a page. Repeated elements should have a unique label that identifies the element within its context.
Use appropriate page titles
A page title is a starting point for a screen reader. Page titles should be unique and should make sense for the page. Avoid generic page titles.
All pages should be navigable using just a keyboard
It should be possible navigate to all points on a page just using a keyboard. Important events triggered by a mouse event should be able to be triggered when the item receives focus through keyboard navigation.
Avoid using colour alone to express meaning
Colour-blind users need additional information to gain meaning if colour is used as the emphasising feature. Also keep in mind that colours can have differing significance in different cultures, so colours should be configurable either through settings or language files.
Use sufficient color contrast when adding color to text. See Tracker ticket MDL 522391
https://tracker.moodle.org/browse/MDL-52391.
Role for button-type links
If a link acts as a button (not forwarding to another page, which is often the case when combined with Javascript), it should declare the role attribute button. Also, as a button is usually triggered by the Space bar, the Javascript should add proper event listeners on the link to accept this key. Read more at Mozilla Developer Network

Web standards, guidelines and legislation

International

USA

UK

See also the Equality Act 2010 Statutory Code of Practice (PDF) for Services, public functions and associations.

Germany

France

European Union

Tools

Firefox extensions

Chrome extension

Accessibility validation tools

Screen readers

Since 2.7, Moodle officially supports the following screen reader/browser configurations (MDL-44002):

Browser Screen reader Minimum version Recommended version
Microsoft Internet Explorer Jaws 15 Latest
Mozilla Firefox NVDA 2014.1 Latest

Other tools and resources:

See also this long list of accessibility tools.

See a live demonstration of a number of accessibility tools.

Resources

Dive Into Accessibility by Mark Pilgrim
Building Accessible Websites by Joe Clark (online version)


See also

Accessibility for Moodle Developers