Title Attributes and Labels for Menu

  • Hi – I am trying to make my site WCAG 2.1 and I keep getting two errors relating to the main menu navigation in the header.

    the 1st error reads

    There is no label to identify the purpose of the form control (1 occurrence)

    and shows the following code segment –
    <select class="selectnav" id="selectnav1"><option value="">- MENU -</option><option value="https://www.draytonvillage.co.uk/village-information/">VILLAGE INFORMATION</option><option value="https://www.draytonvillage.co.uk/village-information/history/">→ History</option> … </select>

    How do I access the code to add the appropriate labels – I’ve looked in header.php, functions.php but can only find php code.

    the 2nd error reads

    The form control has no name (1 occurrence)

    with the following code segment highlighted –
    <select class="selectnav" id="selectnav1"><option value="">- MENU -</option><option value="https://www.draytonvillage.co.uk/village-information/">VILLAGE INFORMATION</option><option value="https://www.draytonvillage.co.uk/village-information/history/">→ History</option><option value="https://www.draytonvillage.co.uk/village-information/visiting-drayton/">→ Visiting Drayton</option><option value="https://www.draytonvillage.co.uk/village-information/visiting-drayton/accommodation/">→→ Accommodation</option><option value="https://www.draytonvillage.co.uk/village-information/village-map/">→ Village Map</option><option value="https://www.draytonvh.co.uk/">→ Drayton Village Hall</option><option value="https://www.draytonvillage.co.uk/village-information/schools/">→ Schools</option><option value="https://www.draytonvillage.co.uk/village-information/164-2/">→ Local Organisations</option><option value="https://www.draytonvillage.co.uk/village-information/local-business/">→ Local Business</option><option value="https://www.draytonvillage.co.uk/classified-directory-2/">→ Classified Directory</option><option value="https://www.draytonvillage.co.uk/village-information/getting-around/">→ Getting Around</option><option value="https://www.draytonvillage.co.uk/village-information/drayton-twinning/">→ Drayton Twinning</option><option value="https://www.draytonvillage.co.uk/village-information-leaflet/">→ Village Information Leaflet</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/refuse-collection/">→ Refuse Collection</option><option value="https://www.draytonvillage.co.uk/drayton-chronicle/">CHRONICLE</option><option value="https://www.draytonvillage.co.uk/drayton-chronicle/chronicle-archive/">→ Chronicle Archive</option><option value="https://www.draytonvillage.co.uk/drayton-chronicle/submit-material/">→ Submit Material</option><option value="https://www.draytonchronicle.net/">→ Chronicle Website</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/" selected="">PARISH COUNCIL</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/about/">→ About</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/councillors/">→ Councillors</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/council-meetings/">→ Council Meetings</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/committees-working-groups/">→ Committees and Working Groups</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/committees-working-groups/finance-personnel-committee/">→→ Finance and Personnel Committee</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/committees-working-groups/planning-committee/">→→ Planning Committee</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/committees-working-groups/public-art-working-group/">→→ Public Art Working Group</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/committees-working-groups/rights-of-way-conservation-working-group/">→→ Rights of Way and Conservation Working Group</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/agendas-minutes/">→ Agendas and Minutes</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/land-assets/">→ Land and Assets</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/allotments/">→ Allotments</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/burial-ground/">→ Burial Ground</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/playgrounds/">→ Playgrounds</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/data-protection/">→ Data Protection</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/join-us/">→ Join Us</option><option value="https://www.draytonvillage.co.uk/drayton-parish-council/contact/">→ Contact – Parish Council</option><option value="https://www.draytonvillage.co.uk/drayton-2020/">DRAYTON 2020</option><option value="https://www.draytonvillage.co.uk/drayton-2020/implementation-committee/">→ Drayton NDP Projects Board</option><option value="https://www.draytonvillage.co.uk/drayton-2020/traffic-studies/">→ Traffic Studies</option><option value="https://www.draytonvillage.co.uk/drayton-2020/steering-group/">→ Steering Group</option><option value="https://www.draytonvillage.co.uk/drayton-2020/consultations/">→ Consultations</option><option value="https://www.draytonvillage.co.uk/drayton-2020/consultations/1st-consultation/">→→ 1st Consultation</option><option value="https://www.draytonvillage.co.uk/drayton-2020/consultations/2nd-consultation/">→→ 2nd Consultation</option><option value="https://www.draytonvillage.co.uk/drayton-2020/submission-copy/">→ Submission Copy</option><option value="https://www.draytonvillage.co.uk/drayton-2020/resources-policies-and-evidence/">→ Resources, Policies and Evidence</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/">→ Working Groups</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/housing/">→→ Housing</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/look-and-feel/">→→ Look and Feel</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/sustainability/">→→ Sustainability</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/transport/">→→ Transport</option><option value="https://www.draytonvillage.co.uk/drayton-2020/working-groups/work-and-play/">→→ Work and Play</option><option value="https://www.draytonvillage.co.uk/gallery">GALLERY</option><option value="https://www.draytonvillage.co.uk/contact-web-admin/">CONTACT</option><option value="https://www.draytonvillage.co.uk/classified-directory-2/">CLASSIFIEDS</option><option value="https://www.draytonvillage.co.uk/fixmystreet-com/">FIXMYSTREET</option></select>

    Again I cannot find where I can add a label to the generated html.

    I am using the latest version of wordpress and I am using the shootingstar theme.

    Any help will be greatly appreciated

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    That kind of menu is only active for mobile sized displays and is part of your theme’s menu implementation. It’s generally recommended you ask in your theme’s dedicated support forum where the theme’s devs and expert users can better help you. However, this theme doesn’t appear to be actively supported any more.

    The menu appears to be inserted via JavaScript after the page loads. Try looking in the selectnav.js file of the theme’s /js/ folder.

    The first one needs a <label>Menu</label> outside of the <select>.
    The second one needs a name="linkname" attribute for the <select>.
    Both of these are abnormal ways to render a menu. If you use a list of links instead of a select, then you get the default browser accessibility of links rather than having to use javascript to make it happen.
    You should ask at your theme’s support forum for how to fix this. But you might want to select a different theme instead.

    Thread Starter julesmeredith

    (@julesmeredith)

    selectnav.js was as suspected the javascript file used to insert the menu so many thanks to @bcworkz.

    Thank you also @joyously for your help but I am a little lost in the syntax in particular outside/attribute for <select>. Do you mean:- <select></select><label>Menu</label> and <select name="linkname"></select> or have I totally misunderstood.

    Yes, that is what the error messages were referring to. But I don’t think putting those would help accessibility much.

    Thread Starter julesmeredith

    (@julesmeredith)

    You were correct @joyously – Although I successfully edited the javascript to insert the html, the menu continues to fail on the same issues. Makes absolutely no difference though now includes my new html.

    It looks like I will need to search the wordpress library for a wcag 2.1 compliant theme as my current theme is no longer supported

    Many thanks for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Title Attributes and Labels for Menu’ is closed to new replies.