वॉयसओवर तत्वों को ठीक से देखने के लिए स्क्रॉल नहीं करता

Question

लंबवत स्क्रॉलिंग सामग्री के साथ HTML निश्चित फ़ूटर (मानक सामान मैं आशा करता हूं, ओवरफ़्लो: ऑटो इत्यादि)।

जब दाएं स्वाइप वॉयसओवर इशारे के माध्यम से तत्वों के माध्यम से लंबवत स्क्रॉल करते हैं, जैसे ही वॉयसओवर फोकस दृश्य दृश्य के नीचे तत्वों को हिट करता है, वॉयसओवर फोकस तत्वों के माध्यम से सही ढंग से चलता है लेकिन स्क्रॉलबार केवल तत्व ऊंचाई के आधे भाग को स्क्रॉल करता है इसलिए वॉयसओवर फोकस दृश्य क्षेत्र के नीचे चलता है।

EDIT अद्यतन स्निपेट, कंटेनर की पिछली एक ऊंचाई में 50% कम था, यह दिखाने के लिए स्पष्टता के लिए अद्यतन किया गया कि ऊंचाई कोई फर्क नहीं पड़ता।

अग्रिम धन्यवाद।

.scrollContainer { 
 
    position: absolute; 
 
    overflow: auto; 
 
    top: 0; 
 
    width: 100%; 
 
    bottom: 100px; 
 
} 
 

 
.rightData { 
 
    float: right; 
 
    padding-right: 10px; 
 
} 
 

 
.stepData { 
 
    padding: 0px; 
 
    list-style-type: none; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
} 
 

 
.stepData > li { 
 
    height: 42px; 
 
    border-top: 1px solid black; 
 
    padding: 12px 20px; 
 
    font-size: 1.25em; 
 
} 
 

 
#footer { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100%; 
 
    bottom: 0; 
 
    background-color: cyan; 
 
}

<div style="height:500px;"> 
 
<div id="container" class="scrollContainer"> 
 
     <ul class="stepData" style="padding:0px;"> 
 
      <li role="button" aria-label="date">06/01<span class="rightData" aria-label="steps">1001</span></li> 
 
      <li role="button" aria-label="date">06/02<span class="rightData" aria-label="steps">1002</span></li> 
 
      <li role="button">06/03<span class="rightData">1003</span></li> 
 
      <li role="button">06/04<span class="rightData">1003</span></li> 
 
      <li role="button">06/05<span class="rightData">1005</span></li> 
 
      <li role="button">06/06<span class="rightData">1006</span></li> 
 
      <li role="button">06/07<span class="rightData">1007</span></li> 
 
      <li role="button">06/08<span class="rightData">1008</span></li> 
 
      <li role="button">06/09<span class="rightData">1009</span></li> 
 
      <li role="button">06/10<span class="rightData">1010</span></li> 
 
      <li role="button">06/11<span class="rightData">1011</span></li> 
 
      <li role="button">06/12<span class="rightData">1012</span></li> 
 
      <li role="button">06/13<span class="rightData">1013</span></li> 
 
      <li role="button">06/14<span class="rightData">1014</span></li> 
 
      <li role="button">06/15<span class="rightData">1015</span></li> 
 
      <li role="button">06/16<span class="rightData">1016</span></li> 
 
      <li role="button">06/17<span class="rightData">1017</span></li> 
 
      <li role="button">06/18<span class="rightData">1018</span></li> 
 
      <li role="button">06/19<span class="rightData">1019</span></li> 
 
      <li role="button">06/20<span class="rightData">1020</span></li> 
 
      <li role="button">06/21<span class="rightData">1021</span></li> 
 
      <li role="button">06/22<span class="rightData">1022</span></li> 
 
      <li role="button">06/23<span class="rightData">1023</span></li> 
 
      <li role="button">06/24<span class="rightData">1023</span></li> 
 
      <li role="button">06/25<span class="rightData">1025</span></li> 
 
      <li role="button">06/26<span class="rightData">1026</span></li> 
 
      <li role="button">06/27<span class="rightData">1027</span></li> 
 
      <li role="button">06/28<span class="rightData">1028</span></li> 
 
      <li role="button">06/29<span class="rightData">1029</span></li> 
 
      <li role="button">06/30<span class="rightData">1030</span></li> 
 
      <li role="button">07/01<span class="rightData">1031</span></li> 
 
      <li role="button">07/02<span class="rightData">1032</span></li> 
 
      <li role="button">07/03<span class="rightData">1033</span></li> 
 
      <li role="button">07/04<span class="rightData">1034</span></li> 
 
      <li role="button">07/05<span class="rightData">1035</span></li> 
 
      <li role="button">07/06<span class="rightData">1036</span></li> 
 
      <li role="button">07/07<span class="rightData">1037</span></li> 
 
      <li role="button">07/08<span class="rightData">1038</span></li> 
 
      <li role="button">07/09<span class="rightData">1039</span></li> 
 
     </ul> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
    footer 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

पृष्ठों पार्श्वस्वर में स्क्रॉल करने योग्य बनाने के लिए चाल position:relative, नहीं absolute का उपयोग कर सामान्य दस्तावेज़ प्रवाह में मुख्य सामग्री क्षेत्रों रखने के लिए है। (मुझे लगता है कि अतिप्रवाह: छिपी हुई और अधिकतम ऊंचाई: शरीर के तत्व पर 100% समस्याएं भी पैदा करती हैं, लेकिन मुझे और अधिक शोध करने की आवश्यकता है।) नौसेना निश्चित स्थिति के बगल में निश्चित स्थिति और स्लाइड का उपयोग कर सकती है। एक सीमा यह है कि एक मेनू जो पृष्ठ की ऊंचाई को भी बहता है, शायद वॉयसओवर में स्क्रॉल नहीं करेगा, क्योंकि यह मूल स्थिति बग से पीड़ित होगा।

Answer 2

सुनिश्चित नहीं है कि यह मदद करता है लेकिन आप setting the VoiceOver focus manually को आजमा सकते हैं। यदि आप भाग्यशाली हैं, तो यह सही स्थिति तक भी स्क्रॉल हो सकता है।

यदि यह काम नहीं करता है, तो आप Element.scrollIntoView() का उपयोग करने का प्रयास कर सकते हैं जो सफारी मोबाइल के नवीनतम संस्करणों में काम करना चाहिए। लेकिन मुझे यकीन नहीं है कि यह वॉयसओवर के साथ अच्छी तरह से खेलता है या नहीं।