Share
In deze serie hebben we gekeken naar enkele eenvoudige manieren waarop thema-ontwikkelaars hun thema toegankelijk kunnen maken. Als u alle aanbevelingen uit deze reeks volgt, overschrijdt u ruimschoots de minimumvereisten voor de toegankelijkheidsgereedag in de WordPress-themarepository.
De tag is echter toegankelijkheid-ready liever dan beschikbaar, omdat geen enkel thema ervoor kan zorgen dat een website toegankelijk is - te veel afhankelijk van hoe het thema wordt gebruikt en van de aard van de inhoud die aan de site is toegevoegd.
In deze laatste zelfstudie bekijken we enkele eenvoudige technieken die we als themaontwikkelaars zouden kunnen gebruiken om de eindgebruikers van ons product te helpen deze op een gebruiksvriendelijke manier te gebruiken. Er is ook veel ruimte voor ontwikkelaars van plug-ins om hetzelfde te doen (een voor de hand liggend voorbeeld dat een plug-in is waarmee een audiobestand kan worden geüpload en gekoppeld aan een aangepast berichttype, kan ook toestaan dat een transcript wordt geüpload en gekoppeld aan dat bestand).
Eerder in deze serie hebben we besproken dat het thema een redelijke koptekststructuur heeft, namelijk de juiste koppen voor de sitetitel en posttitel (s). Zoals vermeld, moet deze structuur de paginastructuur op een zinvolle manier weerspiegelen, en de tags moeten worden genest labels, tags in enzovoorts.
Maar, op elke pagina, als we de (en misschien ) label buiten de inhoud van de pagina of post, zou het een goed idee zijn om het gebruik ervan te ontmoedigen binnen de inhoud, om te voorkomen dat die paginastructuur wordt verbroken. TinyMCE heeft een 'blockformat'-vervolgkeuzelijst waarmee gebruikers snel alinea's en koppen kunnen toevoegen enzovoort. We kunnen de header-tags verwijderen die we niet in de inhoud van het bericht willen gebruiken:
Accentsconagua
function mytheme_tinymce_init ($ init) // Stel de blokformaatelementen in die u in de vervolgkeuzelijst wilt weergeven. Standaard is p, h1, h2, h3, h4, h5, h6 $ init ['theme_advanced_blockformats'] = 'p, h2, h3, h4, h5, h6'; return $ init; add_filter ('tiny_mce_before_init', 'mytheme_tinymce_init');Dit is natuurlijk niet waterdicht en werkt niet tegen gebruikers die de TinyMCE-editor niet gebruiken. Bovendien kunnen we er niet (en we kunnen niet) voor zorgen dat de kopteksten die in de inhoud worden gebruikt, op een zinvolle manier de structuur van die inhoud weergeven. Het ontmoedigt echter het misbruik van de gereserveerde (en ) tags.
Een iets meer betrokken idee, als gebruikers hun eigen kleuren in het thema kunnen selecteren, is ze te waarschuwen wanneer ze kleuren selecteren met een laag contrast (bijvoorbeeld achtergrond en tekstkleuren). Welke kleuren u precies moet vergelijken, hangt af van de keuzes die u de gebruiker hebt gegeven. Hieronder heb ik dit idee vereenvoudigd door een vaste letterkleur aan te nemen # 444444, en dit te vergelijken met de door de gebruiker geleverde achtergrondkleur.
Ik laat de details achter over het instellen van velden in de aanpasser en het inschakelen van live voorbeelden voor de codex. Hier geef ik alleen een voorbeeld van een JavaScript-bestand dat de gebruiker waarschuwt wanneer de gekozen achtergrondkleur te laag is.
Maak eerst een bestand met de naam customizer-a11y.js in je thema, met de volgende code:
(functie ($) // Achtergrondkleur van update bijwerken ... wp.customize ('background_color', functie (waarde) value.bind (functie (nieuwwaarde) // verkrijg waarde om de achtergrondkleur te vergelijken met. var textcolor = ' # 444444 '; // Bereken de contrastverhouding - we bieden deze latere var-ratio = mytheme.checkContrast (tekstkleur, nieuwwaarde); // Afhankelijk van de lettergrootte kunt u de ratio-onderbrekingspunten aanpassen. If (ratio> = 5 ) // Zeer goede contrastverhouding, verberg de verhoudingswaarschuwing $ ('# contrast-waarschuwing-bgkleur'). Hide (); else if (ratio> = 4.5) // Contrast is goed, maar dichtbij komen, weergeven de verhouding $ ('# contrast-waarschuwing-bgkleur'). css ('achtergrond', '# 3AC469') .show (); else if (ratio> = 3) // Contrast is slecht $ ('# contrast -warning-bgcolor '). css (' background ',' # FFA634 ') .show (); else // Contrast is erg slecht $ (' # contrast-warning-bgcolor '). css (' achtergrond ', '# E31837') .show (); // Het waarschuwingsbericht is opgeslagen in mytheme.warningMsg - we zullen dit later toevoegen var text = mytheme.warningMsg.replace ('% f' , verhouding); $ ('# contrast-waarschuwing-bgkleur'). tekst (tekst); ); ); ) (jQuery);Vervolgens moeten we een functie creëren die, gegeven elke twee kleuren (in hex) -indeling, de contrastverhouding daartussen retourneert. Details over het berekenen van deze ratio zijn te vinden op de W3C-website, maar dit wordt gedaan door eerst de "relatieve luminantie" te berekenen (grofweg een maat voor "helderheid".) De contrastverhouding is dan de verhouding van die "relatieve luminantie" -waarden, met een toegevoegde 'penalty' voor felle kleuren.
Het volgende zou moeten leven onderaan het zojuist aangemaakte JavaScript-bestand.
mytheme = / ** * Bereken de relatieve helderheid van twee kleuren * @param tekenreekskleur de voorgrond (tekst) kleur * @param tekenreeks bgcolor de achtergrondkleur * @returns float De relatieve helderheid van de kleuren * / checkContrast = function (kleur , bgcolor) var L1 = this._getLuminance (kleur); var L2 = this._getLuminance (bgcolor); retourratio Math.round ((Math.max (L1, L2) + 0.05) / (Math.min (L1, L2) + 0.05) * 10) / 10; / ** * Bereken de helderheid van een kleur * kleurparameter @param in Hex-formaat * @ retourneert de luminantie van de kleur * / _getLuminance = functie (kleur) var R, G, B; // Hashtag verwijderen als huidige kleur = color.replace (nieuwe RegExp ("^ [#] +"), ""); if (color.length == 3) R = this._getRGBScore (color.substring (0,1) + color.substring (0,1)); G = this._getRGBScore (color.substring (1,2) + color.substring (1,2)); B = this._getRGBScore (color.substring (2,3) + color.substring (2,3)); else R = this._getRGBScore (color.substring (0,2)); G = this._getRGBScore (color.substring (2,4)); B = this._getRGBScore (color.substring (4,6)); return (0,2126 * R + 0,7152 * G + 0,0722 * B); / ** * Bereken de RGB-score volgens http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18 * @param color * @returns float * / _getRGBScore = function (color) try color = parseInt (kleur, 16); // Hex tot decimaal catch (err) color = false; if (color! == false) color = color / 255; kleur = (kleur <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; Ten slotte laden we de JavaScript-code en drukken we de markering voor de waarschuwing voor contrast af.
function mytheme_customizer_live_preview () echo ''; echo ''; wp_enqueue_script ('customizer-a11y', get_template_directory_uri (). '/ customizer-a11y.js', array ('jQuery', 'customize-preview'), '1.0', true); // Maak het waarschuwingsbericht beschikbaar in ons JavaScript-bestand. wp_localize_script ('customizer-a11y', 'mytheme', array ('warningMsg' => esc_html __ ('Kleurcontrastwaarschuwing Ratio:% f', 'mytheme'),)); add_action ('customize_preview_init', 'mytheme_customizer_live_preview');We hebben hier slechts een paar suggesties gedetailleerd behandeld, maar de lijst kan doorgaan. Er is ook veel ruimte voor ontwikkelaars van plug-ins om hetzelfde te doen:
'Ontmoedigen' betekent hier niet dat de optie volledig moet worden verwijderd. Het waarschuwen van de gebruiker voor de gevolgen van de toegankelijkheid van de website kan echter een lange weg zijn om de gebruiker te informeren en uiteindelijk de webtoegankelijkheid te verbeteren..
We voltooien deze serie met een overzicht van nuttige bronnen en hulpmiddelen om u te helpen meer te leren over de toegankelijkheid van webinhoud, en nog belangrijker om u te helpen ervoor te zorgen dat uw volgende plug-in of thema beschikbaar is voor alle gebruikers..
(Andere gesprekken zijn te vinden op http://wordpress.tv/tag/accessibility/)
