Adding a label/id to Navigation Select box

(Callum Gorringe) #1

Hi guys

 

Hope you can help again!

 

I'm using a navigation select menu and running HTML Codesniffer over it finds two errors saying it doesnt have a name or label/title attribute.  We need to to have this WCAG 2.0 compliant, but with keywords not sure how to name them.  Code looks like this

 

<div style="border-bottom:1px solid black;padding-bottom: 25px;">
<div style="float:left; padding-top: 5px;"><strong>Previous Page</strong>: %previous_page_link% <strong>Next Page</strong>: %next_page_link%</div>
<div id="Test name" style="float:right;">
<strong>Pages</strong>%navigation_menu_selection_list% </div> </p>
</div>
<p>
 
SO my question very basically, CAN you name keywords? Or will we have to create a nav box using code?
 
Hope someone can shed some light as we need to start making our websites accessible!  Thanks heaps.
 
 
(Nic Hubbard) #2

What asset type is printing that keyword?

(Bart Banda) #3

Can you also print the HTML the above code is outputting and highlight the code that the codesniffer is saying is invalid?

(Callum Gorringe) #4

I think this is what you are after  

The asset type is a “multiple page page “

 

 

Errors

 

This select element does not have a name available to an accessibility API. Valid names are: label element, title attribute.

<strong>Pages</strong><select id="page_multiple_page_273616nav_selection_list" onchange="location.href=this.options[selectedIndex].value"><option value="" selected="sele...</select>

 

Form control does not have an explicit label or title attribute, identifying the purpose of the control.

<strong>Pages</strong><select id="page_multiple_page_273616nav_selection_list" onchange="location.href=this.options[selectedIndex].value"><option value="" selected="sele...</select>

 

Html

 

<div id="body_content"> 

			&#160;
		
			<p>&lt;div style="border-bottom:1px solid black;padding-bottom: 25px;"&gt;			
	
			&#160;
		
			<p>&lt;div style="float:left; padding-top: 5px;"&gt;&lt;strong&gt;Previous Page&lt;/strong&gt;: &lt;strong&gt;Next Page&lt;/strong&gt;: &lt;a href="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/2'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/2</a>"&gt;Interim planning schemes&lt;/a&gt;&lt;/div&gt;			
	
			&#160;
		
			<p>&lt;div id="Cheeseburgers" style="float:right;"&gt;			
	
			&#160;
		
			<p>&lt;strong&gt;Pages&lt;/strong&gt;&lt;select id="page_multiple_page_273616nav_selection_list" onchange="location.href=this.options[selectedIndex].value"&gt;&lt;option value="" selected="selected"&gt;Planning schemes&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/2'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/2</a>"&gt;Interim planning schemes&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/3'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/3</a>"&gt;Dispensations&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/4'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/4</a>"&gt;Planning purposes notices&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/5'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/5</a>"&gt;Special planning orders&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/6'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/6</a>"&gt;Planning directives&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/7'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/7</a>"&gt;State policies&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/8'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/8</a>"&gt;Projects of State significance&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/9'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/9</a>"&gt;Projects of Regional significance&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/10'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/10</a>"&gt;Reserves &amp; water management plans&lt;/option&gt;&lt;option value="<a data-ipb='nomediaparse' href='http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/11'>http://www.planning.tas.gov.au/newsite/how_planning_works/how_we_do_assessments_m/11</a>"&gt;Other reviews &amp; inquiries&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;/p&gt;			
	
			&#160;
		
			<p>&lt;/div&gt;			
	
			&#160;
		
			<p>&lt;p&gt;				<p>&#160;				<p>THanks!
(Bart Banda) #5

Ah I see, good old mutlipage asset. This would need to get reported as a bug as it should print it by default.

 

As a workaround, you can try doing the following keyword modifier on the keyword:

%navigation_menu_selection_list^replace:<select:<select name="navigation_menu_selection_list"%

Not sure if it will work though....

 

To fix the label error (if you get the above keyword working) you can then hardcode the label field before the keyword to satisfy the checker: 

<label for="page_multiple_page_273616nav_selection_list">Navigation menu</label>
(Nic Hubbard) #6 
%navigation_menu_selection_list^replace:<select:<select name="navigation_menu_selection_list"%

 

Bart, you are the king of keyword modifiers!

(Callum Gorringe) #7

Hi guys thanks heaps another issue solved! The first one didnt work but the second one did so now codesniffer has no errors, brilliant thanks again!