Trình đọc màn hình: Làm thế nào để tạo một từ với các thẻ xung quanh các chữ cái của nó được nói dưới dạng một từ duy nhất, chứ không phải là một chuỗi các chữ cái?

Question

Tôi có một tiêu đề như thế này:

<h1>This is a t<span>e</span>st.</h1>

Các thẻ xung quanh chữ "e" nguyên nhân Mac OS X Voiceover để đọc các chữ cái riêng lẻ của từ riêng biệt, chứ không phải là toàn bộ từ. Vì vậy, nó nói:

"Đây là một bước".

Thay vì:

"Đây là một thử nghiệm."

Cho rằng tôi cần kèm theo một chữ cái của một từ trong thẻ *, làm cách nào để đảm bảo rằng trình đọc màn hình nói từ như bình thường?

• N.B: mọi thẻ sẽ thực hiện. Tôi đã thử <b>, <i> và <em> và tất cả đều tạo ra cùng một hiệu ứng.

Answer 1

Đây không phải là giải pháp nhưng có thể là giải pháp hữu ích nếu tình huống của bạn cho phép bạn.

Tôi cảm thấy bạn muốn quấn một chữ cái để hiển thị khác, thay vào đó bạn có thể hiển thị từ "kiểm tra" làm hình ảnh bằng cách làm như vậy bạn có thể tạo nó theo bất kỳ cách nào bạn muốn và đặt từ "test" làm thuộc tính alt trong hình ảnh

<h1>This is a <span id="specialWord" ><img src = "testImage.jpg" alt = "test"></span>. </h1> 

Vì vậy, nếu như giọng nói OS X đó sẽ đọc chính xác. Bởi vì nếu tôi nhớ chính xác nó đọc thuộc tính alt của một hình ảnh.

Bây giờ, trong trường hợp đó, sự cố có thể phát sinh. Bất kỳ ai muốn chọn nó như một văn bản thì nó sẽ không thể. Bạn có thể giải quyết điều đó bằng cách gọi một hàm javascript để tự động thay đổi html bên trong của thẻ span (với id = "specialWord") thành "test" từ img.

Hy vọng bạn có thể hưởng lợi từ điều đó.

Answer 2

Một cách để làm việc xung quanh không minh bạch này là bằng cách cung cấp một phiên bản màn hình đọc-chỉ-của văn bản cùng với miếng ngon đó là ném ra khỏi trình đọc màn hình, chẳng hạn như:

đoạn CSS:

.offscreen 
{ 
    position: absolute; 
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ 
    clip: rect(1px, 1px, 1px, 1px); 
    padding: 0; 
    border: 0; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
} 

Markup dụ:

<h1>This is a 
    <span aria-hidden="true">t<strong>e</strong>st</span> 
    <span class="offscreen">test</span>. 
</h1> 

ở đó, các thuộc tính aria-hidden ẩn miếng ngon phiền hà từ trình đọc màn hình (<span aria-hidden="true">t<strong>e</strong>st</span>) và offscreen class trực quan ẩn phiên bản trình đọc màn hình của văn bản (<span class="offscreen">test</span>).

Kết quả cuối cùng là người dùng trình đọc màn hình sẽ nghe thấy “Đây là một bài kiểm tra” và người dùng được nhìn thấy sẽ thấy “Đây là bài kiểm tra” trong trang.