Is an HTML list allowed to have no child list items? Specifically, is this allowed:
<ul>
</ul>
The HTML validator on the W3C site does not complain when you test it with an empty list, e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test with empty list</title>
</head>
<body>
<ul>
</ul>
</body>
</html>
So semantically, it's not illegal from a pure HTML perspective. However, the WAI-ARIA Recommendation section on Required Owned Elements suggests that lists must have at least one listitem:
For example, an element with the role list will own at least one
element with the role group or listitem.
However, the WCAG 2 test rule for this very check suggests that the rule is inapplicable, because it does not have explicit role:
**Inapplicable Example 2**
This ul element does not have an explicit semantic role.
<ul>
<li>Item 1</li>
</ul>
One automated accessibility testing tool (SiteImprove) is throwing an error for an empty element, whereas other tools (Lighthouse, WAVE) are not.
I'm trying to get a definite answer on whether an empty list is legal or not.
The discrepancy between the different accessibility testing tools' report on your empty <ul> list is probably down to a different interpretation of whether the <ul> must own a required element. Based on the WCAG 2 rule for ARIA required owned elements that you referenced, this appears to hinge on the definition of whether the role of an element is implicit or explicit.
When you use the ARIA role attribute, you are assigning an explicit role to an element, such as role="list". The WAI-ARIA recommendations on required owned elements that you referenced state that the owning element contains at least one element with the associated role="listitem" or role="group". If not, then it must have the aria-busy="true" attribute if the owned items will be loaded later. (Note that an element being "owned by" another element in the accessibility tree is different from an element "owning" another element in the DOM tree - see here.)
In your example, a <ul> element without the ARIA role attribute would have an implicit role of list, but because the list is empty, the implicit role could be ignored by a screen reader and treated as role="presentation". When I tested your code in Firefox, the accessibility tree showed the <ul> as having a semantic list role, but JAWS and NVDA ignored it. Similarly, when I tried it in Chrome with JAWS and NVDA, both reported that no lists were found on the page.
Technically, there shouldn't be any difference between whether an element's role is implicit or explicit. Explicit roles are designed to help better define the accessibility tree where the DOM layout is not representative of the page information. But this is probably why you're getting different results with different accessibility testing tools.
It's worth pointing out that the WCAG 2 test rule is only a proposed rule and still needs to be approved by the Accessibiligy Guidelines Working Group (AGWG). Based on your comments, the SiteImprove tool is correct in saying that an empty <ul> list would need the aria-busy="true" attribute assigned to it until the list is populated.
Related
I don't want to use xpath on the elements below.
element :img_login, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img'
element :msg_login_senha_invalidos, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'
They are on the page as follows:
element img_login
<div class="sc-jRQAMF eRnhep">
<img src="https://quasar-flash-staging.herokuapp.com/assets/login/flashLogo-3a77796fc2a3316fe0945c6faf248b57a2545077fac44301de3ec3d8c30eba3f.png" alt="Quasar Flash">
</div>
element msg_login_senha_invalidos
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled">Login e/ou senha inválidos</p>
You have asked multiple questions about converting from using XPath to some other type of selector when using Site-Prism. StackOverflow is meant to be a place to come, learn, and improve your skills - not just to get someone else to do your work. It really seems you'd be better off reading up on CSS and how it can be used to select elements. Also note that there's nothing specifically wrong with using XPath, per se, it's just the way people new to testing and selecting elements on a page tend to use it (just copying a fully specified selector from their browser) that leads to having selectors that are way too specific and therefore brittle. A good site for you to learn about the different general CSS selector options available is https://flukeout.github.io/ - and you can look at the built-in selector types provided by Capybara at https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L18
In your current case the below may work, but with the HTML you have provided all that's possible to say is that they will match the elements shown however they may also match other elements which will give you ambiguous element errors.
element :img_login, :css, 'img[alt="Quasar Flash"]' # CSS attribute selector
element :msg_login_senha_invalidos, :css, 'p.Mui-error', text: 'Login e/ou senha inválidos' # CSS class selector combined with Capybara text filter
I'm kind of new to XPATH-query. I use RF and selenium2library and the XPath Helper-plugin in chrome to test a certain website page. I'm new to HTML/CSS/JavaScript as well.
The web page consists of two ULs (lists) for left and right sides of the page and each one has a few LIs which have few divisions comprised of widgets (JPEG images etc).
I need to count this list rows (number of LIs in each UL). I have already done the samething in a drop down menu to count its elements with no problem (perhaps because it was considered
a web element). But right now I use the same "Get Matching Xpath Count" which returns almost the whole page HTML source instead of a number and it then fails.
All my program is based on getting the number of LIs in a UL (of drop down menu, page, table,...). so I wonder what to do now. Here is an example of the HTML code of the page:
<ul class="rqcol" id="col8a580456553ae">
<li class="rqportlet" id="por8a58045655">
<div id="hdrpor8a580" class="rqhdr" onmouseover="RQ.util.showTools(this)" onmouseout="RQ.util.hideTools(this)"> </div> </li>
<li class="rqportlet" id="por8a580456" >
<div id="hdrpor8a581" class="rqhdr" onmouseover="RQ.util.showTools(this)" onmouseout="RQ.util.hideTools(this)"> </div></li>
</ul>
and my code was:
Get Matching Xpath Count | //ul[#id="ccol8a580456553ae"]/li
which does give me some texts plus HTML code.i also tried:
Get Length | //ul[#id="ccol8a580456553ae"]
which doesn't give me 2 but a big number.
An XPath 2.0 expression to count the 'li' for the specific '' would be:
//ul[#id="col8a580456553ae"]/count(li)
Try this new chrome extension
https://chrome.google.com/webstore/detail/relative-xpath-helper/eanaofphbanknlngejejepmfomkjaiic
You've made a typo in the id value - an extra "c" char in the beginning; otherwise the xpath is correct:
${count}= Get Matching Xpath Count //ul[#id="col8a580456553ae"]/li
By the way, the keyword Get Matching Xpath Count is deprecated in the latest version of the SeleniumLibrary, in favour of Get Element Count
Do I need aria-label attributes when I'm using h-card (this is for company contact information in a page footer)?
<div class="h-card">
<a class="u-url" href="http://example.com">
<img src="http://example.com/static/logo.svg" alt="Example Logo">
<span class="p-name sr-only">Example Corp.</span>
</a>
<div aria-label="Address" class="p-adr h-adr">
<span class="p-locality">Eugene</span>
<span class="p-region">OR</span>
<span class="p-postal-code">97403</span>
</div>
<a aria-label="Telephone" class="p-tel" href="tel:12345678">(12) 345-678</a>
</div>
Are the aria-labels superflous here or do they provide some value? Ought there be more detailed aria- attributes? (And if so, which?)
WAI-ARIA and Microformats don’t "compete":
WAI-ARIA is a framework to enhance the accessibility of your web content.
Microformats are a convention for marking up structured data on your HTML pages.
They have different goals, and consumers of WAI-ARIA don’t necessarily support Microformats, and consumers of Microformats don’t necessarily support WAI-ARIA.
So when deciding if you need the WAI-ARIA attribute aria-label in your example, ignore if or how you use the Microformat h-card, and vice-versa. They don’t interact with each other.
Best not to use aria-label here; at worst, a screenreader will end up reading out the aria-label instead of your content, making it less accessible.
As spec'd, the aria-label value, if present, is used instead of the element content (simplifying somewhat); but in practice, behavior varies quite depending on element type and on the specific screenreader/browser used;
As it turns out, in the case or aria-label being used on SPAN,
VoiceOver on Mac reads out the label instead of the content
NVDA and JAWS on Windows ignore the aria-label outright and just read out the div/span content. (This behavior could change in some future update to these tools...)
So at best, it's ignored; at worst, it replaces your actual content. Best to not use it in your case then.
ARIA can be pretty useful when used carefully; but browser compat issues mean it's unfortunately full of pitfalls; if you're going to use it at all, recommend checking out the specs, and also ensure that you test with real-world screenreaders so you can ensure that using aria doesn't have the unintended consequence of making your content less accessible!
I'm creating a web page and currently I'm adding Microdata markup to the code. I’m using schema.org’s MusicGroup.
I have an index.html page from where I'd like to take the name and the image properties for this band:
<div class="container" itemscope itemtype="http://schema.org/MusicGroup">
...
<img itemprop="image" src="img/logo.png" alt="logo" />
<p>We are <span itemprop="name">NAME OF THE BAND</span>.</p>
...
</div>
However on the about_us.html page there is a short description which I'd also like to use:
<div class="container" itemscope itemtype="http://schema.org/MusicGroup">
...
<p itemprop="description">A description of the band.</p>
...
</div>
When I use the code like this, search enginges (understandably) treat them as two different MusicGroups:
MusicGroup 1:
Image: .../img/logo.png
Name: NAME OF THE BAND
MusicGroup 2:
Description: A description of the band.
How can I link these properties into one item?
Microdata’s name-value pairs are per webpage, not per website.
So on a website about a music group, it can be expected that each page contains an "own" MusicGroup item, which is, however, actually always about the same music group. But from the Microdata or schema.org perspective, these different items would not be semantically connected that way (consumers might guess this however, e.g. by comparing property values).
Microdata’s itemid attribute could be used to uniquely identify each item. But it is required that the used vocabulary supports "global identifiers for items" (itemid is used for some types on schema.org (e.g., in the example for MedicalScholarlyArticle), but it’s not clear to me if it’s really supported as required by Microdata for other types, like MusicGroup).
So in your case, you could:
leave it as it is
duplicate the information, so that each item has all relevant content (possibly using meta/link elements)
move all information on one page (possibly using itemref)
(if it should be allowed for general use with schema.org) use itemid to state that several items are actually about the same thing
I'm trying to find the n-th element that has a special class in a document. The elements are not necessarily children of the same parent. So for example
<ul>
<li><div class="foo">This</div></li>
<li><div>Nothing</div>
<ul>
<li><div class="foo">This also</div></li>
</ul>
</li>
<li><div class="foo">And this</div><li>
</ul>
I'd like to find the first, second or third element that has the class .foo.
I tried
page.find '.foo'
Which errors in Capybara::Ambiguous: Ambiguous match, found 3 elements matching css ".foo"
I then tried
page.all('.foo')[n]
Which works nice except that it doesn't seem to wait this little time like Capybaras find does, which I need because the HTML is actually generated from ajax data. So how to do this correctly with find?
Okay after a short chat in #RubyOnRails on freenode it became clear to me that this isn't as easy possible as it sounds first. The problem is that Capybara can't know if the .foos that are already inserted into the page are "all" of them. Thats why .all has no (or doesn't need) support for waiting like .find has.
The solution would be to manually wait for an appropriate amount of time and then just use .all.
Nokogiri's CSS queries are effective for finding elements of certain classes. It is explained in the tutorial.
For example you can use the following Ruby one-liner to read from a given file and find the second element of class foo:
ruby -rnokogiri -e 'puts Nokogiri::HTML(readlines.join).css(".foo")[1]' sample.html
which returns
<div class="foo">This also</div>
Replace the number in [1] with the index of the element you want to find and replace sample.html with the html file you want to search in. If you want to pick out certain parts of the elements you can use methods of Nokogiri::XML::Element, e.g. content to get its contents.