Accessibility issue

[DrPDash]

Hi, the plugin is very useful - thank you - but I am running into accessibility issues that are a strict requirement for agency based websites. Can someone provide some ideas on how to improve the accessibility feature?

Error message:

Empty button A button is empty or has no value text.

Basic Code:

ctlShareLink = L.easyButton('fa-share-alt', function () { alert('Yahoo...') }, 'alert Yahoo');
ctlShareLink.addTo(map);

Where to insert alt or value for the buttons?

Thank you

[atstp]

The button element is be available for you to modify directly at ctlShareLink.button, so something like the following should work for you:

ctlShareLink = L.easyButton('fa-share-alt', function () { alert('Yahoo...') }, 'alert Yahoo');
ctlShareLink.button.alt = "alert yahoo";
ctlShareLink.addTo(map);

ctlShareLink = L.easyButton('fa-share-alt', function () { alert('Yahoo...') }, 'alert Yahoo');
ctlShareLink.button.title = "alert yahoo";
ctlShareLink.addTo(map);

[DrPDash]

Hi, thanks for the pointer and I was hopeful about it but it did not remove the accessibility error: ctlDrawToggle = L.easyButton('fas fa-atlas', function () { if (ctlDraw._map) { map.removeControl(ctlDraw); } else { ctlDraw.addTo(map); } }, 'show/hide GIS Tools'); ctlDrawToggle.button.alt = "drawToggle"; ... then ... addTo(map)

The WAVE checker still shows:

Empty button A button is empty or has no value text.

The following Google Developer page sheds some light about button accessibility, i.e., to include innerText, or other attributes: https://developers.google.com/web/tools/lighthouse/audits/button-name

However, when I used innerText ctlDrawToggle.button.innerText = "drawToggle";, of course the font-awesome 'fas fas-atlas' was removed (expected). The error was also removed but w/o the FA icon it does not help.

I have also tried the following by specifying aria-hidden and title in the call to L.easyButton but that did not help me either:

ctlDrawToggle = L.easyButton('<span aria-hidden="true" title="Draw Toggle" class="fas fa-atlas"></span>', function () { //console.log(ctlDraw._map); if (ctlDraw._map) { map.removeControl(ctlDraw); } else { ctlDraw.addTo(map); } }, 'show/hide GIS Tools'); ctlDrawToggle.button.alt = "drawToggle";

Any more thoughts? Perhaps, using font-awesome has some issues. I'm not sure, just pondering, any further thoughts will be of help.

[atstp]

Have you tried setting the value of the button? the title of the button? or perhaps some sort of hidden/zero-width span with content?

I'm not familiar with the WAVE checker, but now that you have access to the <button> I would expect that it's a just matter of what changes you need to make.

Please let me know once you find something that works; If it's a simple fix, I'd like to update the library to improve accessibility.

[DrPDash]

WAVE checker is a Chrome extension for evaluation: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US

You are right about having access to the <button> - Thank You, this is a good first step generally speaking for a neat code. It seems like I can assign both name and value: ctlDrawToggle.button.name = 'drawToggleBtn' ; ctlDrawToggle.button.value = 'drawToggle' ; ctlDrawToggle.button.title = 'OVDrawToggle' ; Extract from Chrome: Sources:

button: button.easy-button-button.leaflet-bar-part.leaflet-interactive.unnamed-state-active
disabled: false
form: null
formAction: "http://localhost/oceanviewplus/?tab=settings&date=2020-01-29&zoom=3&cLat=30.0000&cLon=-100.0000&crs=EPSG4326&b_o_layers=2_0_5_FFFFF&s1L=T&s1I=3&s1O=1.00&s1S=T&s1Lg=F&s1Va=F&s2L=F&s2I=0&s2O=0.75&s2S=F&s2Lg=F&s2Va=F&s1s2Sp=F&vS=F&v1L=F&v2L=F&hS=F&hL=F&hLg=F&hW=25&hP=1010&eeS=F&eqL=F&eqMM=3.00&voL=F&wfL=F"
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
**name: "drawToggleBtn"**
type: "button"
**value: "drawToggle"**
willValidate: false
validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
validationMessage: ""
labels: NodeList []
**title: "OVDrawToggle"**
lang: ""
translate: true
dir: ""
hidden: false
accessKey: ""
draggable: false
spellcheck: true
autocapitalize: ""
contentEditable: "inherit"
isContentEditable: false
inputMode: ""

But I am still getting accessibility error from WAVE on this button (along with others). May be the issue roots from somewhere else. I am keeping it on my list to investigate more and if I find something, will get back here. Thanks for all your time.

[Malvoz]

https://github.com/CliffCloud/Leaflet.EasyButton/issues/96#issuecomment-578433206:

ctlShareLink = L.easyButton('fa-share-alt', function () { alert('Yahoo...') }, 'alert Yahoo');
ctlShareLink.button.alt = "alert yahoo";
ctlShareLink.addTo(map);

alt is for <img> only (@atstp probably thought of title but wrote alt). @prasanjitdash try ctlShareLink.button.title = "alert yahoo".

[atstp]

thank you! I'll update the example above